Resize Observer

Star Sponsor

A highly performant and true to life polyfill for observing changes to element dimensions.

If you find something is not quite right, please open an issue.

Installation

Install the package from npm.

    
npm i @juggle/resize-observer
    
  

Once installed, you can import it like any other module.

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

Usage

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

const ro = new ResizeObserver((entries, observer) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect; // legacy
    const [{ inlineSize, blockSize }] = entry.contentBoxSize;
    console.log(entry.target, `${inlineSize} x ${blockSize}`);
  }
});

ro.observe(firstElement); // observe content-box (default)
ro.observe(secondElement, { box: 'border-box' });
ro.observe(canvasElement, { box: 'device-pixel-content-box' });
    
  

Pseudo Classes

The library supports user-actioned pseudo classes, like :hover, :active, :focus

Hover, tap or focus me.

Animations*

The library will detect changes which occur during animations.

Tap me.

Transitions*

The library will detect changes which occur during transition.

Tap me.

NB: Slow-starting transitions may not be noticed, unless, other interactions occur in the application. Any missed calculations will be noticed at the end of the transition.

Performance Test

This animates 200 elements and counts the changes. To start/stop the animation, tap the cell area.

Updates: 0


*Once the animation, or, transition has finished, the observer will sleep and wait for the next interaction. This keeps CPU idle, reducing battery consumption on portable devices.