useElementSize

Layout/Viewport

A React hook that tracks an element's dimensions and updates when the element is resized using ResizeObserver for efficient monitoring.

Installation

npm install @thibault.sh/hooks

API Reference

Signature


interface ElementSize {
  width: number;
  height: number;
}

function useElementSize(elementRef: RefObject<HTMLElement>): ElementSize

Parameters

NameTypeDescriptionDefault
elementRef
RefObject<HTMLElement>
React ref object pointing to the target HTML element.-

Returns

ElementSize

An object containing the current width and height of the element.

Properties:

PropertyTypeDescription
width
number
Current width of the element in pixels.
height
number
Current height of the element in pixels.