Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shama/resize-event
Detect resize on an element without polling or iframes
https://github.com/shama/resize-event
dom element resize
Last synced: 16 days ago
JSON representation
Detect resize on an element without polling or iframes
- Host: GitHub
- URL: https://github.com/shama/resize-event
- Owner: shama
- Created: 2015-07-23T01:04:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-24T22:33:13.000Z (over 1 year ago)
- Last Synced: 2024-10-19T03:59:48.053Z (26 days ago)
- Topics: dom, element, resize
- Language: JavaScript
- Size: 10.7 KB
- Stars: 22
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# resize-event
Detect resize on an element without polling or iframes[![build status](https://secure.travis-ci.org/shama/resize-event.svg)](https://travis-ci.org/shama/resize-event)
[![NPM version](https://badge.fury.io/js/resize-event.svg)](https://badge.fury.io/js/resize-event)If the browser supports [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) this will use that otherwise it will fallback to a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
to detect changes to the `style` attribute of an element and then compares the
width/height to check if it has changed.A polyfill is provided for `MutationObserver` which will then use polling on really old browsers.
## usage
```js
import onResize from "resize-event"// Create or select an element, must be in the DOM
const element = document.createElement('div')
document.body.appendChild(element)// Bind the event
const observer = onResize(element, () => {
console.log('element was resized', element.offsetWidth, element.offsetHeight)
})// Trigger the event
element.style.width = '500px'// Later disconnect the event
observer.disconnect()
```## install
```shell
npm install resize-event --save
```# license
(c) 2020 Kyle Robinson Young. MIT License