useMeasure ​
Hook to measure the size and position of an element
browser
test coverage
Last changed: last month
Installation ​
Library
CLI
Manual
typescript
import { useMeasure } from '@siberiacancode/reactuse';
Usage ​
typescript
const { x, y, width, height, top, left, bottom, right } = useMeasure(ref);
// or
const { ref, x, y, width, height, top, left, bottom, right } = useMeasure();
Demo ​
Api ​
Returns
UseMeasureReturn & { ref: StateRef<Target> }
Type declaration ​
typescript
import type { HookTarget } from '@/utils/helpers';
import type { StateRef } from '../useRefState/useRefState';
export type UseMeasureReturn = Pick<
DOMRectReadOnly,
'bottom' | 'height' | 'left' | 'right' | 'top' | 'width' | 'x' | 'y'
>;
export interface UseMeasure {
(target: HookTarget): UseMeasureReturn;
<Target extends Element>(
target?: never
): UseMeasureReturn & {
ref: StateRef<Target>;
};
}
Source ​
Source • DemoContributors ​
D