Resize Observer

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

Animations*

The library will detect changes which occur during animations.

Transitions*

The library will detect changes which occur during transition.

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.