Skip to content

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 ​

Parameters

NameTypeDefaultNote
targetHookTarget-The element to measure

Returns

UseMeasureReturn

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 • Demo

Contributors ​

D
debabin
debabin

Released under the MIT License.