useElementSize

React Sensor Hook that tracks size of an HTML element. ResizeObserver MDN

useElementSize tracks the width and height of a DOM element in real time using the ResizeObserver API. It returns the current width and height as a reactive tuple that updates whenever the element is resized. Pass a ref to the target element and optional ResizeObserverOptions (e.g., { box: "border-box" }) to control which box model is observed.

When to Use

• Building responsive components that adapt based on their own size rather than viewport size
• Implementing container queries in older browsers that lack native support
• Dynamically sizing canvas elements, charts, or virtualized lists

Notes

• SSR-safe: Returns [0, 0] during server-side rendering. Observation starts after mount.
• Performance: Uses ResizeObserver which is more efficient than polling or listening to window resize events. The observer is disconnected automatically on unmount.
• See also useMeasure for a similar hook that returns a full DOMRect, useElementBounding for position and size via getBoundingClientRect, and useWindowSize for viewport dimensions.

Usage

function Demo() {
  const ref = useRef<HTMLTextAreaElement>(null);

  const [width, height] = useElementSize(ref, { box: "border-box" });

  return (
    <div>
      <div>Resize the box to see changes</div>
      <br />
      <textarea
        ref={ref}
        disabled
        style={{ width: 200, height: 200 }}
        value={`width: ${width}\nheight: ${height}`}
      />
    </div>
  );
};

API

useElementSize

Returns

readonly [number, number]: A tuple with the following elements:

• width
• height

Arguments

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;