Resize Observer

JavaScript DOM · Reference cheat sheet

📋 Overview

ResizeObserver fires when an Element’s size changes — more precise than window.resize for component-level layouts, container queries polyfills, and chart reflows. Observe content box, border box, or device-pixel content box.

🔧 Core concepts

Create: new ResizeObserver(callback).
observe(el, \{ box \}): content-box (default), border-box, device-pixel-content-box.
Entry: contentRect, borderBoxSize, contentBoxSize, devicePixelContentBoxSize, target.
unobserve / disconnect: cleanup.
Fired before paint after layout; avoid layout loops.

const ro = new ResizeObserver((entries) => {
  for (const e of entries) {
    const { width, height } = e.contentRect;
    chart.resize(width, height);
  }
});
ro.observe(container);

💡 Examples

// Prefer box sizes arrays (newer)
new ResizeObserver((entries) => {
  const e = entries[0];
  const [size] = e.contentBoxSize;
  const w = size.inlineSize;
  const h = size.blockSize;
  render(w, h);
}).observe(el, { box: "content-box" });

// Border box for total footprint
ro.observe(el, { box: "border-box" });

// Responsive component without window listener
function mount(el) {
  const ro = new ResizeObserver(([e]) => {
    el.dataset.wide = String(e.contentRect.width > 600);
  });
  ro.observe(el);
  return () => ro.disconnect();
}

// Canvas backing store
const canvas = document.querySelector("canvas");
new ResizeObserver(() => {
  const dpr = devicePixelRatio;
  const { width, height } = canvas.getBoundingClientRect();
  canvas.width = Math.round(width * dpr);
  canvas.height = Math.round(height * dpr);
  draw();
}).observe(canvas);

// Guard infinite resize loops
let frame;
const ro = new ResizeObserver(() => {
  cancelAnimationFrame(frame);
  frame = requestAnimationFrame(update);
});

⚠️ Pitfalls

Changing size inside the callback can cause observation loops — batch via rAF and check thresholds.
contentRect is legacy-ish; prefer contentBoxSize / borderBoxSize (arrays for fragmented boxes).
SVG / table quirks exist — verify in target browsers.
Not a substitute for CSS container queries when pure CSS suffices.
Disconnect on teardown.

intersection_observer.md — visibility
mutation_observer.md — DOM changes
position.md — measurements
../timers.md — rAF
cssom.md — computed sizes

Resize Observer

Resize Observer

📋 Overview

🔧 Core concepts

💡 Examples

⚠️ Pitfalls

🔗 Related

On this page