ResizeObserver
A minimal library which polyfills the ResizeObserver API and is entirely based on the latest Draft Specification.
This library observes elements and dispatches notifications when their dimensions change. Differences are only calculated during animation, or, after DOM mutation or user interaction has occurred, keeping CPU and power consumption minimal.
Demo Playground
Installation
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();
});
ro.observe(document.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 { width, height } = entry.contentRect;
console.log(`Element ${index + 1}:`, `${width}x${height}`);
});
});
const els = docuent.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el));
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 inlcude border-box
content-box
scroll-box
device-pixel-border-box
. device-pixel-border-box
can only be used on a canvas
element.
import ResizeObserver from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Elements resized:', entries.length);
entries.forEach((entry, index) => {
const { inlineSize, blockSize } = entry.borderBoxSize;
console.log(`Element ${index + 1}:`, `${inlineSize}x${blockSize}`);
});
});
const observerOptions = {
box: 'border-box'
};
const els = docuent.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el, observerOptions));
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 porformance on browsers with native support.
import ResizeObserverPolyfill from '@juggle/resize-observer';
const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
const ro = new ResizeObserver((entries, observer) => {
console.log('Something has resized!');
});
What's it good for?
- Building responsive websites.
- Creating 'self-aware' Web Components.
- Making 3rd party libraries more responsive. e.g. charts and grids.
- Many other things!
Limitations
- No support for IE10 and below. IE11 is supported.
- Dynamic stylesheet changes may not be noticed and updates will occur on the next user interaction.
- Currently no support for observations when
display:none
is toggled (coming soon).
TypeScript support
This library is written in TypeScript, however, it's compiled into JavaScript during release. Definition files are included in the package and should be picked up automatically to re-enable support in TypeScript projects.