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/hooksAPI Reference
Signature
function useResizeObserver<T extends HTMLElement>(
elementRef: RefObject<T>
): ResizeObserverEntry | nullParameters
| Name | Type | Description | Default |
|---|---|---|---|
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:
| Property | Type | Description |
|---|---|---|
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. |