ResizeObserver for Responsive Component Design

ResizeObserver Detection

ResizeObserver notifies you when an element's content or border box size changes, enabling truly responsive components that adapt to their container rather than just the viewport.

Detection

const hasResizeObserver =
  typeof ResizeObserver !== 'undefined';

Basic Usage

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(\`Element resized: \${width}x\${height}\`);

    // Responsive behavior based on element size
    if (width < 400) {
      entry.target.classList.add('compact');
    } else {
      entry.target.classList.remove('compact');
    }
  }
});

observer.observe(document.querySelector('.widget'));

Box Size Options

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // Content box size (default)
    const contentBox = entry.contentBoxSize[0];

    // Border box size (includes padding + border)
    const borderBox = entry.borderBoxSize[0];

    console.log(
      'Content:', contentBox.inlineSize, 'x', contentBox.blockSize,
      'Border:', borderBox.inlineSize, 'x', borderBox.blockSize
    );
  }
});

ResizeObserver vs Other Approaches

Approach	Triggers On	Granularity
window.onresize	Viewport resize only	Global
Media queries	Viewport thresholds	Global
ResizeObserver	Any element size change	Per-element
Container queries (CSS)	Container size change	CSS-only

Performance Tips

1. Debounce heavy operations: ResizeObserver can fire rapidly during window resize
2. Avoid layout thrashing: Batch DOM reads and writes in the callback
3. Disconnect when done: Call observer.disconnect() or observer.unobserve() when monitoring is no longer needed
4. Avoid infinite loops: Do not resize the observed element inside the callback