Module: hooks/resize-observer
Table of contents
Interfaces
Functions
Functions
useResizeObserver
▸ useResizeObserver<T>(reference): Size
Custom hook for monitoring and responding to changes in size of a referenced HTML element.
This hook provides a convenient way to get the current width and height of an element
when it resizes. The hook observes the element referred to by the passed reference
and updates the size state whenever the element's size changes.
Type parameters
| Name | Type | Description |
|---|---|---|
T | extends HTMLElement | The HTML element type that extends HTMLElement which is targeted by the ref object. |
Parameters
| Name | Type | Description |
|---|---|---|
reference | RefObject<T> | React ref object pointing to the target element to be observed. |
Returns
The size of the observed element. The Size object contains two properties:
width and height, which represent the current dimensions of the element in pixels.
Both properties are initially undefined and get updated upon each resize event.
Example
const ref = useRef<HTMLDivElement>(null);
const size = useResizeObserver(ref);
console.log(size); // { width: 1024, height: 768 }