Resize Observer

Polyfills the ResizeObserver API.
Alternatives To Resize Observer
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Free Programming Books Zh_cn102,820
3 days ago28gpl-3.0
:books: 免费的计算机编程类中文书籍,欢迎投稿
Storybook79,0447,28921,4765 hours ago1,108September 14, 20221,712mitTypeScript
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
Ionic Framework49,06619,484880a day ago420May 06, 2020454mitTypeScript
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Bulma47,19610,3721,3487 days ago60May 08, 2022359mitCSS
Modern CSS framework based on Flexbox
30 Days Of Javascript36,456
2 days ago1January 25, 2022253JavaScript
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too:
Taro33,045268655a day ago516September 23, 20221,009otherTypeScript
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。
Sheetjs32,8674,3792,297a month ago170March 24, 2022129apache-2.0JavaScript
📗 SheetJS Spreadsheet Data Toolkit -- New home
Fe Interview23,288
3 months ago5,312mitJavaScript
前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
Nativescript22,5952,6191,1023 days ago1,908September 28, 2021948mitTypeScript
⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ❤️ Angular, Capacitor, Ionic, React, Solid, Svelte, Vue + SwiftUI, Jetpack Compose, Flutter and you name it compatible.
Table21,7001,7701,12220 hours ago217May 16, 2022127mitTypeScript
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Alternatives To Resize Observer
Select To Compare

Alternative Project Comparisons

Resize Observer

A minimal library which polyfills the ResizeObserver API and is entirely based on the latest Draft Specification.

It immediately detects when an element resizes and provides accurate sizing information back to the handler. Check out the Example Playground for more information on usage and performance.

The latest Resize Observer specification is not yet finalised and is subject to change. Any drastic changes to the specification will bump the major version of this library, as there will likely be breaking changes. Check the release notes for more information.


npm i @juggle/resize-observer

Basic usage

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

const ro = new ResizeObserver((entries, observer) => {
  console.log('Body has resized!');
  observer.disconnect(); // Stop observing

ro.observe(document.body); // Watch dimension changes on body

This will use the ponyfilled version of ResizeObserver, even if the browser supports ResizeObserver natively.

Watching multiple elements

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

const ro = new ResizeObserver((entries, observer) => {
  console.log('Elements resized:', entries.length);
  entries.forEach((entry, index) => {
    const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
    console.log(`Element ${index + 1}:`, `${width}x${height}`);

const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el)); // Watch multiple!

Watching different box sizes

The latest standards allow for watching different box sizes. The box size option can be specified when observing an element. Options include border-box, device-pixel-content-box and content-box (default).

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

const ro = new ResizeObserver((entries, observer) => {
  console.log('Elements resized:', entries.length);
  entries.forEach((entry, index) => {
    const [size] = entry.borderBoxSize;
    console.log(`Element ${index + 1}:`, `${size.inlineSize}x${size.blockSize}`);

// Watch border-box
const observerOptions = {
  box: 'border-box'

const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el, observerOptions));

From the spec:

The box size properties are exposed as sequences in order to support elements that have multiple fragments, which occur in multi-column scenarios. However the current definitions of content rect and border box do not mention how those boxes are affected by multi-column layout. In this spec, there will only be a single ResizeObserverSize returned in the sequences, which will correspond to the dimensions of the first column. A future version of this spec will extend the returned sequences to contain the per-fragment size information.

Using the legacy version (contentRect)

Early versions of the API return a contentRect. This is still made available for backwards compatibility.

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

const ro = new ResizeObserver((entries, observer) => {
  console.log('Elements resized:', entries.length);
  entries.forEach((entry, index) => {
    const { width, height } = entry.contentRect;
    console.log(`Element ${index + 1}:`, `${width}x${height}`);

const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el));

Switching between native and polyfilled versions

You can check to see if the native version is available and switch between this and the polyfill to improve performance on browsers with native support.

import { ResizeObserver as Polyfill } from '@juggle/resize-observer';

const ResizeObserver = window.ResizeObserver || Polyfill;

// Uses native or polyfill, depending on browser support.
const ro = new ResizeObserver((entries, observer) => {
  console.log('Something has resized!');

To improve this even more, you could use dynamic imports to only load the file when the polyfill is required.

(async () => {
  if ('ResizeObserver' in window === false) {
    // Loads polyfill asynchronously, only if required.
    const module = await import('@juggle/resize-observer');
    window.ResizeObserver = module.ResizeObserver;
  // Uses native or polyfill, depending on browser support.
  const ro = new ResizeObserver((entries, observer) => {
    console.log('Something has resized!');

Browsers with native support may be behind on the latest specification. Use entry.contentRect when switching between native and polyfilled versions.

Resize loop detection

Resize Observers have inbuilt protection against infinite resize loops.

If an element's observed box size changes again within the same resize loop, the observation will be skipped and an error event will be dispatched on the window. Elements with undelivered notifications will be considered for delivery in the next loop.

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

const ro = new ResizeObserver((entries, observer) => {
  // Changing the body size inside of the observer
  // will cause a resize loop and the next observation will be skipped = '50%';

// Listen for errors
window.addEventListener('error', e => console.log(e.message));

// Observe the body

Notification Schedule

Notifications are scheduled after all other changes have occurred and all other animation callbacks have been called. This allows the observer callback to get the most accurate size of an element, as no other changes should occur in the same frame.

resize observer notification schedule

How are differences detected?

To prevent constant polling, every frame. The DOM is queried whenever an event occurs which could cause an element to change its size. This could be when an element is clicked, a DOM Node is added, or, when an animation is running.

To cover these scenarios, there are two types of observation. The first is to listen to specific DOM events, including resize, mousedown and focus to name a few. The second is to listen for any DOM mutations that occur. This detects when a DOM node is added or removed, an attribute is modified, or, even when some text has changed.

This allows for greater idle time, when the application itself is idle.


  • Inbuilt resize loop protection.
  • Supports pseudo classes :hover, :active and :focus.
  • Supports transitions and animations, including infinite and long-running.
  • Detects changes which occur during animation frame.
  • Includes support for latest draft spec - observing different box sizes.
  • Polls only when required, then shuts down automatically, reducing CPU usage.
  • Zero delay system - Notifications are batched and delivered immediately, before the next paint.


  • Transitions with initial delays cannot be detected.*
  • Animations and transitions with long periods of no change, will not be detected.*
  • Style changes from dev tools will only be noticed if they are inline styles.*

Tested Browsers


chrome safari ff opera edge edge IE
Chrome Safari Firefox Opera Edge Edge 12-18 IE11
IE 9-10 (with polyfills)**


chrome safari ff opera opera mini edge samsung internet
Chrome Safari Firefox Opera Opera Mini Edge Samsung Internet

*If other interaction occurs, changes will be detected.

**IE10 requires additional polyfills for Map and MutationObserver. IE9 requires IE10 polyfills plus requestAnimationFrame. For more information, see issue here.

Popular Reactjs Projects
Popular Vue Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Resize Events
Container Queries