Observes element size changes using a hidden iframe
Branch: master
Clone or download
Latest commit 7acd4fd Aug 31, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Switch to Microbundle, dropping some bytes! Aug 31, 2018
README.md
index.js avoid unnecessary returns Aug 31, 2018
package.json

README.md

simple-element-resize-detector NPM

Observes resizing of an element using a hidden iframe.

JSFiddle Demo

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 to observeResize() must have position: 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