useResizeObserver

Layout/Viewport

A React hook that observes element size changes using the ResizeObserver API, providing detailed resize information including content rect and box sizes.

Installation

npm install @thibault.sh/hooks

API Reference

Signature

function useResizeObserver<T extends HTMLElement>(
  elementRef: RefObject<T>
): ResizeObserverEntry | null

Parameters

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

Returns

ResizeObserverEntry | null

ResizeObserverEntry with detailed size information, or null if no element or resize has occurred.

Properties:

PropertyTypeDescription
contentRect
DOMRectReadOnly
The content rectangle of the element.
contentBoxSize
ReadonlyArray<ResizeObserverSize>
Array of content box dimensions.
borderBoxSize
ReadonlyArray<ResizeObserverSize>
Array of border box dimensions.
devicePixelContentBoxSize
ReadonlyArray<ResizeObserverSize>
Array of device pixel content box dimensions.
target
Element
The observed element.