`useElementSize`

Returns the live content-box { width, height } of a referenced element. A thin wrapper over useResizeObserver with a friendlier API.


import { useRef } from 'react'
import { useElementSize } from '@wire-ui/react'
 
function Measured() {
  const ref = useRef<HTMLDivElement>(null)
  const { width, height } = useElementSize(ref)
 
  return (
    <div ref={ref}>
      {width.toFixed(0)} × {height.toFixed(0)}
    </div>
  )
}

Parameters

Param	Type	Description
`target`	`RefObject<HTMLElement \| null>`	The element to measure.

Returns

{ width: number, height: number } — defaults to { 0, 0 } until the observer has reported.