https://github.com/developit/simple-element-resize-detector
Observes element size changes using a hidden iframe
https://github.com/developit/simple-element-resize-detector
dom dom-mutation-observers dom-utilities element-resizes observes-resizing
Last synced: 10 months ago
JSON representation
Observes element size changes using a hidden iframe
- Host: GitHub
- URL: https://github.com/developit/simple-element-resize-detector
- Owner: developit
- Created: 2017-01-04T04:54:12.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-06-13T13:03:00.000Z (over 6 years ago)
- Last Synced: 2025-03-29T21:06:42.315Z (10 months ago)
- Topics: dom, dom-mutation-observers, dom-utilities, element-resizes, observes-resizing
- Language: JavaScript
- Size: 11.7 KB
- Stars: 189
- Watchers: 7
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-element-resize-detector [](https://www.npmjs.org/package/simple-element-resize-detector)
Observes resizing of an element using a hidden iframe.
[**JSFiddle Demo**](https://jsfiddle.net/developit/62Lgh3wz/)
## Installation
```sh
npm i -S simple-element-resize-detector
```
## Usage
```js
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:
```js
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 ``s to detect when an element resizes. ``s are heavy objects are usually take good amount of memory. Be careful and don't abuse it.
## License
MIT