ghost-portal/packages/react-hooks/src/useElementPosition.ts
Jaco 37f44367b4
Rework context usage (& move most to react-hooks) (#8731)
* Rework context usage (& move most to react-hooks)

* Move use{Accounts, Addresses} to use contexts

* Cleanups

* Global alignment renames

* Combine keyring subjects into KeyringCtx

* Cleanups to contexts

* Small adjustment to window size usage

* Popup test via data-testid

* Fix Bounties tests

* Move getStats to correct location

* Adjust ApiStats

* Do add unsubs (although unneeded)
2023-01-09 12:56:38 +02:00

41 lines
1.2 KiB
TypeScript

// Copyright 2017-2023 @polkadot/react-hooks authors & contributors
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useState } from 'react';
import { createNamedHook } from './createNamedHook';
import { useIsMountedRef } from './useIsMountedRef';
import { useScroll } from './useScroll';
import { useWindowSize } from './useWindowSize';
export interface ElementPosition {
x: number,
y: number,
width: number,
height: number,
}
function useElementPositionImpl (ref: React.MutableRefObject<HTMLElement | undefined | null>): ElementPosition | undefined {
const [elementPosition, setElementPosition] = useState<ElementPosition>();
const mountedRef = useIsMountedRef();
const windowSize = useWindowSize();
const scrollY = useScroll();
useEffect(() => {
if (mountedRef.current && ref && ref.current) {
const { height, width, x, y } = ref.current.getBoundingClientRect();
setElementPosition({
height,
width,
x,
y
});
}
}, [mountedRef, ref, scrollY, windowSize]);
return elementPosition;
}
export const useElementPosition = createNamedHook('useElementPosition', useElementPositionImpl);