@stackline/resize-observer

A maintained ResizeObserver 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 Stackline release.

Documentation & Live Demos | npm | GitHub Download | Issues | Repository

Latest version: 1.0.0

---

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

---

Why this library?

@stackline/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 keeps the proven ponyfill API while cleaning up metadata, documentation, and GitHub Pages delivery.

Features

Feature	Supported
Stackline 1.0.0 ponyfill baseline	✅
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. Direct Download
4. Setup
5. Basic Usage
6. Core APIs
7. Box Options and Output
8. Browser Assets
9. Run Locally
10. Publishing
11. License

Published Version Compatibility

Package version	Maintained line	Runtime target	TypeScript declarations	Demo link
1.0.0	ResizeObserver ponyfill baseline	Modern browsers with ES2018 demo bundle	lib/exports/resize-observer.d.ts	ResizeObserver 1.0.0 docs

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

---

Installation

npm install @stackline/resize-observer

---

Direct Download

If you want a plain JavaScript browser release, download the UMD bundle from GitHub:

• GitHub downloads folder

The archive includes resize-observer.browser.js, which exposes window.ResizeObserver.

<script src="./resize-observer.browser.js"></script>
<script>
  const observer = new ResizeObserver((entries) => {
    for (const entry of entries) {
      console.log(entry.contentRect.width, entry.contentRect.height);
    }
  });

  observer.observe(document.querySelector('[data-resize-target]'));
</script>

---

Setup

import { ResizeObserver } from '@stackline/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 '@stackline/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
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