`useResizeObserver`

Observes the size of the element referenced by ref and returns its current content-box dimensions. Pass onResize to react imperatively without depending on the returned signal.

Wraps ResizeObserver and bails out gracefully when the environment doesn’t support it (e.g. older SSR contexts).


import { useRef } from 'react'
import { useResizeObserver } from '@wire-ui/react'
 
function ResizableBox() {
  const ref = useRef<HTMLDivElement>(null)
  const { width, height } = useResizeObserver(ref)
 
  return (
    <div ref={ref} className="resize overflow-auto border p-4" style={{ minWidth: 200 }}>
      {Math.round(width)} × {Math.round(height)}
    </div>
  )
}

Parameters

Param	Type	Description
`ref`	`RefObject<HTMLElement \| null>`	Element to observe.
`onResize`	`(size, entry) => void`	Optional callback invoked with each resize.

Returns

An { width, height } object that re-renders on resize.