useResizeObserver

A React hook for observing size changes of an element using the Resize Observer API

Resize Observer Demo

Observe size changes of the container in real time.

Drag to resize this box

Width: 0px

Height: 0px

Installation

Props

Prop	Type	Default	Description
`target`	`React.RefObject<T \| null>`	-	The DOM element to observe
`options`	`ResizeObserverOptions`	`{}`	Configuration for the resize observer
`callback`	`(entries: ResizeObserverEntry[], observer: ResizeObserver) => void`	-	Function called when size changes are observed

Options

Prop	Type	Default	Description
`box`	`'content-box' \| 'border-box'`	`'content-box'`	Box model to observe (content-box or border-box)

Data

Property	Type	Description
`disconnect`	`() => void`	Function to stop observing size changes

Key Features & Details

Browser Support

The Resize Observer API is well-supported across modern browsers:

Chrome: Full support (v64+)
Firefox: Full support (v69+)
Safari: Partial support (v13+)
Edge: Full support (v79+)
Opera: Full support (v51+)

Cross-Browser Compatibility

The hook provides consistent behavior across different browsers
Gracefully handles cases where the API is not supported

Performance Considerations

Automatically disconnects observers when components unmount
Provides a disconnect function for manual cleanup
Supports configurable options to optimize observation
Observes only the target element to minimize overhead

Best Practices & Caveats

Always provide a target element
Use the disconnect function when observation is no longer needed
Avoid observing large or complex elements without throttling
Consider using the appropriate box option based on layout requirements
Clean up observers when components unmount
Polyfill or check for API support in older browsers
Handle multiple entries in the callback if observing multiple targets
Throttle or debounce callbacks to improve performance in high-frequency changes

Examples

Basic Usage

const ref = useRef<HTMLDivElement | null>(null);
const [size, setSize] = useState({ width: 0, height: 0 });
 
useResizeObserver<HTMLDivElement>({
  target: ref,
  callback: (entries) => {
    const { width, height } = entries[0].contentRect;
    setSize({ width: Math.round(width), height: Math.round(height) });
  },
});
 
return (
  <div ref={ref}>
    Width: {size.width}, Height: {size.height}
  </div>
);

With Custom Options

useResizeObserver<HTMLDivElement>({
  target: ref,
  callback: (entries) => {
    // Handle size changes
  },
  options: { box: 'border-box' },
});

With Disconnect

const { disconnect } = useResizeObserver<HTMLDivElement>({
  target: ref,
  callback: (entries) => {
    // Handle size changes
  },
});
 
// Later, to stop observing
disconnect();

Usage

import { useResizeObserver } from '@/hooks/use-resize-observer';
 
function MyComponent() {
  const ref = useRef<HTMLDivElement | null>(null);
  const [size, setSize] = useState({ width: 0, height: 0 });
 
  useResizeObserver<HTMLDivElement>({
    target: ref,
    callback: (entries) => {
      const { width, height } = entries[0].contentRect;
      setSize({ width, height });
    },
  });
 
  return (
    <div ref={ref}>
      Width: {size.width}, Height: {size.height}
    </div>
  );
}

Common Use Cases

Responsive components handling dynamic sizing
Detecting element size changes (e.g., for charts or canvases)
Adjusting layouts based on container size
Monitoring size changes for custom scrollbars or resizable panels
Detecting text reflows or content changes impacting size