Awesome
simple-element-resize-detector
Observes resizing of an element using a hidden iframe.
Installation
npm i -S simple-element-resize-detector
Usage
import observeResize from 'simple-element-resize-detector';
// any DOM element that can have children
let element = document.createElement('div');
// listen for resize
observeResize(element, () => {
console.log('new size: ', {
width: element.clientWidth,
height: element.clientHeight
});
});
To stop observing resize events, simply remove the returned detector frame:
let detector = observeResize(el, () => {});
detector.remove();
// or, for better browser compatibility:
// detector.parentNode.removeChild(detector)
Notes
element
passed toobserveResize()
must haveposition: relative
style to be correctly observed, otherwise nearest relative ancestor will be observed instead.- This library uses
<iframe>
s to detect when an element resizes.<iframe>
s are heavy objects are usually take good amount of memory. Be careful and don't abuse it.
License
MIT