Skip to Content
react-utilsuseResizeObserver

useResizeObserver

See source on Github

Registers a ResizeObserver on ref and executes callback when the observed element is resized.

  • @param ref - A RefObject of the element to observe.
  • @param callback - A function to execute when the observed element is resized.
  • @param options - Configurable options
  • @returns void

Example

const ref = useRef<HTMLElement>(null); const [size, setSize] = useState({ width: 0, height: 0 }); useResizeObserver(ref, (entry) => setSize({ width: entry.contentRect.width, height: entry.contentRect.height, }));