@stackline/resize-observer

Polyfills the ResizeObserver API and supports box size options from the latest spec.

Documentation | npm | Issues | Repository

Current package version: 1.0.5

Why this package?

@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.

Compatibility

Installation

npm install @stackline/resize-observer

Usage and API reference

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.5

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

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. Security
12. Community and Links
13. License
14. Credits

Published Version Compatibility

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

Box Options and Output

Browser Assets

The published package keeps the maintained distribution layout:

The package keeps the established named exports in both module systems:

const { ResizeObserver } = require('@stackline/resize-observer');

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

Run Locally

npm install
npm run check
npm start

Publishing

Releases 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.

Security

Report vulnerabilities privately by following SECURITY.md. Do not disclose exploit details in a public issue.

Community and Links

• Stackline website
• GitHub projects
• npm packages
• Reddit community — r/Stackline
• Maintainer LinkedIn

Use the repository's issue tracker for reproducible bugs and feature requests. Join r/Stackline to share examples, ask usage questions, and discuss releases.

License

Apache-2.0. See LICENSE.

Credits

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

Credits and original authors

• 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.

Community and Links

• Stackline website
• GitHub projects
• npm packages
• Reddit community — r/Stackline
• Maintainer LinkedIn

Use this repository's issue tracker for reproducible bugs and feature requests. Join r/Stackline for examples, usage questions and release discussions.