@revivejs/resize-observer

A maintained ResizeObserver 4.0.x ponyfill for browser applications, with support for content-box, border-box, and device-pixel-content-box observations, TypeScript declarations, ESM and UMD bundles, and versioned docs for every published ReviveJS release.

Documentation & Live Demos | npm | Issues | Repository

Latest version: 4.0.5

Credits: Original project by Juggle.
Maintained and republished by Alexandroit under the ReviveJS scope.

Why this library?

@revivejs/resize-observer keeps the proven ResizeObserver ponyfill API available under active package ownership for teams that still need a browser-safe observer implementation with box-size support. The package stays intentionally close to the maintained 4.0.x line while cleaning up metadata, documentation, and GitHub Pages delivery.

Features

| Feature | Supported | | :--- | :---: | | Maintained ResizeObserver 4.0.x ponyfill line | ✅ | | content-box, border-box, and device-pixel-content-box | ✅ | | Classic contentRect plus box-size arrays | ✅ | | HTML, inline, and SVG targets | ✅ | | Transition, animation, and lifecycle observation demos | ✅ | | ESM and UMD bundles | ✅ | | TypeScript declaration files | ✅ | | Versioned docs per published package release | ✅ |

Table of Contents

1. Published Version Compatibility
2. Installation
3. Setup
4. Basic Usage
5. Core APIs
6. Box Options and Output
7. Browser Assets
8. Run Locally
9. Publishing
10. License

Published Version Compatibility

| Package version | Maintained line | Runtime target | TypeScript declarations | Demo link | | :---: | :---: | :--- | :--- | :--- | | 4.0.5 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | lib/exports/resize-observer.d.ts | ResizeObserver 4.0.5 docs | | 4.0.4 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | lib/exports/resize-observer.d.ts | ResizeObserver 4.0.4 docs | | 4.0.3 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | lib/exports/resize-observer.d.ts | ResizeObserver 4.0.3 docs | | 4.0.2 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | lib/exports/resize-observer.d.ts | ResizeObserver 4.0.2 docs | | 4.0.1 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | lib/exports/resize-observer.d.ts | ResizeObserver 4.0.1 docs | | 4.0.0 | ResizeObserver 4.0.x | Modern browsers with ES2018 demo bundle | lib/exports/resize-observer.d.ts | ResizeObserver 4.0.0 docs |

Earlier 3.x releases were published from the original upstream package line at @juggle/resize-observer.

Installation

npm install @revivejs/resize-observer

Setup

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

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

Basic Usage

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

const target = document.querySelector('[data-resize-target]');

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const contentSize = entry.contentBoxSize[0];
    console.log({
      width: entry.contentRect.width,
      height: entry.contentRect.height,
      inlineSize: contentSize?.inlineSize,
      blockSize: contentSize?.blockSize
    });
  }
});

observer.observe(target, { box: 'content-box' });

Core APIs

| API | Description | | :--- | :--- | | new ResizeObserver(callback) | Creates an observer that receives ResizeObserverEntry[] and the active observer instance. | | observe(target, options?) | Starts observing an Element with an optional box selection. | | unobserve(target) | Stops observing one target while leaving the observer active for others. | | disconnect() | Stops every active observation on the observer. |

Box Options and Output

| Option / Field | Description | | :--- | :--- | | box: 'content-box' | Measures the content box and maps naturally to text and padding-free layouts. | | box: 'border-box' | Includes padding and borders for container-style sizing workflows. | | box: 'device-pixel-content-box' | Exposes device-pixel measurements when the runtime supports them. | | contentRect | Legacy rectangle snapshot used widely in existing production code. | | contentBoxSize | Logical inline/block sizes for the content box. | | borderBoxSize | Logical inline/block sizes for the border box. | | devicePixelContentBoxSize | Logical inline/block sizes expressed in device pixels. |

Browser Assets

The published package keeps the maintained distribution layout:

| File | Description | | :--- | :--- | | lib/exports/resize-observer.js | ESM bundle | | lib/exports/resize-observer.umd.js | UMD/browser-compatible bundle | | lib/exports/resize-observer.d.ts | TypeScript declarations |

Run Locally

npm install
npm test
npm run build
npm run build:docs:all
npm start

Publishing

npm run build
npm run pack:check
npm publish --access public

License

Apache-2.0. See LICENSE.

Credits

• Original project: Juggle
• Upstream repository: https://github.com/juggle/resize-observer
• Maintained by: Alexandroit