Resize Observer

GitHub stars

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 (let entry of entries) {
    const { inlineSize, blockSize } = entry.contentBoxSize;
    const { width, height } = entry.contentRect; // use for backwards compatibility
    entry.target.innerText = `${inlineSize} x ${blockSize}`;
  }
});

ro.observe(someElement);
    
  

Pseudo Classes

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

Hover, click 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.