Watch any DOM element for size changes without polyfills.
npm install watch-resizewatchResize
> Watch any DOM element for size changes without polyfills.
A zero-dependency, cross-compatible ResizeObserver alternative that doesn't require polyfills. You can watch any element for size changes based on its bounding box.
Install via yarn or npm:
``sh`
yarn add watch-resize
`sh`
npm install watch-resize
`ts
import { watchResize } from 'watch-resize';
const target = document.getElementById('my-element');
watchResize(target, ({ element, event, prevBoundingClientRect, destroy }) => {
// Do stuff here for each "resize"
})).then(() => {
// Once the promise resolves, the resize watcher has successfully mounted!
});
`
An object implementing ResizePayload is passed to subscribe handler:
`ts``
export interface ResizePayload
element: T;
event: UIEvent;
prevBoundingClientRect: ClientRect | DOMRect; // The previous result of "element.getBoundingClientRect()".
destroy: () => void; // Unobserves the element and cleans up event listeners
}