Polyfills the ResizeObserver API and supports box size options from the latest spec.
Documentation | npm | Issues | Repository
Current package version: 1.0.5
@stackline/resize-observer is maintained as part of the Stackline package collection. It is an independent continuation of the original project; original authors and licenses remain credited below.
| Item | Value |
|---|---|
| Package | @stackline/resize-observer@1.0.5 |
| API target | See the package-specific API reference |
| Supported Node.js | >=18 |
| License | Apache-2.0 |
| Module type | commonjs |
| Main entry | lib/exports/resize-observer.umd.js |
| Module entry | lib/exports/resize-observer.mjs |
| Types | lib/exports/resize-observer.d.ts |
| Runtime dependencies | none |
npm install @stackline/resize-observerA maintained ResizeObserver ponyfill for browser applications, with support for
content-box,border-box, anddevice-pixel-content-boxobservations, 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.5
Credits: Original project by Juggle.
Maintained and republished by Alexandroit under the Stackline scope.
@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.
| Feature | Supported |
|---|---|
| Maintained Stackline 1.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 | ✅ |
- Published Version Compatibility
- Installation
- Direct Download
- Setup
- Basic Usage
- Core APIs
- Box Options and Output
- Browser Assets
- Run Locally
- Publishing
- Security
- Community and Links
- License
- Credits
| Package version | Maintained line | Runtime target | TypeScript declarations | Demo link |
|---|---|---|---|---|
| 1.0.5 | Current | ESM, CommonJS, and browser global | TypeScript 3.9+ | ResizeObserver 1.0.5 docs |
| 1.0.3 | Previous | ESM, CommonJS, and browser global | TypeScript 3.9+ | ResizeObserver 1.0.3 docs |
| 1.0.2 | Previous | ESM, CommonJS, and browser global | TypeScript 3.9+ | ResizeObserver 1.0.2 docs |
| 1.0.1 | Previous | ESM, CommonJS, and browser global | TypeScript 3.9+ | ResizeObserver 1.0.1 docs |
| 1.0.0 | Previous stable baseline | ESM for bundlers and UMD/CommonJS | TypeScript declarations | ResizeObserver 1.0.0 docs |
Earlier 3.x releases were published from the original upstream package line at @juggle/resize-observer.
npm install @stackline/resize-observerIf you want a plain JavaScript browser release, download the UMD bundle from GitHub:
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>import { ResizeObserver } from '@stackline/resize-observer';
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log(entry.contentRect.width, entry.contentRect.height);
}
});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' });| 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. |
| 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. |
The published package keeps the maintained distribution layout:
| File | Description |
|---|---|
lib/exports/resize-observer.mjs |
Bundled ESM entry point, including native Node ESM support |
lib/exports/resize-observer.umd.js |
CommonJS and UMD namespace entry point |
lib/exports/resize-observer.browser.js |
Plain browser bundle exposing ResizeObserver, ResizeObserverEntry, and ResizeObserverSize globals |
lib/exports/resize-observer.d.ts |
Shared TypeScript declarations, with ESM/CJS-specific declaration entry points |
The package keeps the established named exports in both module systems:
const { ResizeObserver } = require('@stackline/resize-observer');import { ResizeObserver } from '@stackline/resize-observer';npm install
npm run check
npm startReleases are built, tested, and published through the repository's GitHub Actions workflow using npm trusted publishing and provenance. The workflow verifies the tested tarball's SHA-512 digest before publishing.
Report vulnerabilities privately by following SECURITY.md. Do not disclose exploit details in a public issue.
Use the repository's issue tracker for reproducible bugs and feature requests. Join r/Stackline to share examples, ask usage questions, and discuss releases.
Apache-2.0. See LICENSE.
- Original project: Juggle
- Upstream repository: https://github.com/juggle/resize-observer
- Maintained by: Alexandroit
- Original project: resize-observer.
- Alexandro Paixao Marques.
- Juggle.
- Copyright 2019 JUGGLE LTD.
- Stackline maintenance: Alexandro Paixao Marques and Stackline contributors.
Original copyright, license notices and contributor acknowledgements remain part of this distribution. Stackline maintenance does not replace authorship of the original work.
Use this repository's issue tracker for reproducible bugs and feature requests. Join r/Stackline for examples, usage questions and release discussions.