RESIZE OBSERVER 4.0.x · MAINTAINED PONYFILL

@revivejs/resize-observer

A maintained ResizeObserver ponyfill for browser applications, with support for content-box, border-box, and device-pixel-content-box observations.

Framework agnostic Works with Angular, React, Vue, Web Components, and plain browser applications.

Spec-aware box sizing Observe content-box, border-box, and device-pixel-content-box from the same ponyfill surface.

Versioned docs history Each published package version gets its own docs source and compiled demo.

Interactive explorer Test basic usage, SVG targets, inline elements, transitions, animations, and lifecycle flows.

Explore examples README

Setup in 3 steps

Install

npm install @revivejs/resize-observer

Import the ponyfill

import { ResizeObserver } from '@revivejs/resize-observer';

Observe your element

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry.contentRect.width, entry.contentRect.height);
  }
});

ro.observe(document.querySelector('[data-resize-target]'));

Example explorer

Browse the maintained ponyfill through real browser behaviors instead of a short demo page: box options, SVG, inline targets, animations, lifecycle hooks, and performance stay visible in one navigable explorer.

Interactive controls

API reference

These are the public entry points and observation concepts that show up repeatedly in the docs explorer.

Core API

API	Description
`new ResizeObserver(callback)`	Creates an observer that receives `ResizeObserverEntry[]` plus the observer instance.
`observe(target, options?)`	Starts observing an element with an optional box selection.
`unobserve(target)`	Stops observing one target while keeping the observer active for others.
`disconnect()`	Stops every observation registered on the observer.

Box options

Option	Description
`'content-box'`	Measures the content box and maps naturally to text and padding-free layouts.
`'border-box'`	Includes padding and borders for container-sized workflows.
`'device-pixel-content-box'`	Exposes device-pixel measurements for high-density rendering scenarios.

Entry fields

Field	Description
`target`	The observed DOM element or SVG element.
`contentRect`	Legacy rectangle snapshot used across existing production codebases.
`contentBoxSize`	Readonly array of logical inline/block sizes for the content box.
`borderBoxSize`	Readonly array of logical inline/block sizes for the border box.
`devicePixelContentBoxSize`	Readonly array sized in device pixels when supported by the environment.

Supported scenarios

Scenario	Description
Inline elements	Observe text-driven inline content and watch wrapping affect the measured box.
SVG elements	Observe scalable graphics alongside regular HTML elements.
Animations and transitions	Capture resize callbacks while styles change over time.
Large grids	Stress-test callback throughput with many observed elements.