Basic Usage

Introduction

Create a Resize Observer with a callback that receives entries containing the element’s new dimensions.

Basic Setup

const element = document.querySelector('.responsive-box');

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

    // React to size changes
    if (width < 400) {
      element.classList.add('compact');
    } else {
      element.classList.remove('compact');
    }
  }
});

observer.observe(element);

Content Rect Properties

const { width, height, left, top, x, y } = entry.contentRect;
// width, height — element's content box dimensions
// left, top — distance from element's left/top edge to its content area

Summary

Create with new ResizeObserver(callback)
Callback receives array of ResizeObserverEntry objects
entry.contentRect contains new dimensions
observer.observe(element) to start watching

Basic Usage

Basic Usage

Introduction

Basic Setup

Content Rect Properties

Summary

Further Reading