Resize event listeners on DOM Elements!
- Zero dependencies!
- Super tiny, at ~900B gzipped
- Ultra fast performance
At the moment, the only Element that supports the resize event is window. It's a super handy event to have!
Resizey adds that same functionality (and a bit more) to regular Elements.
If you want a more native approach, I recommend checking out ResizeObserver. Unfortunately, it's currently not very well support yet.
To start using resizey, add it to your project using npm or yarn by running:
// npm
npm install --save resizey
// yarn
yarn add resizey
To start listening to Element resize events, simply import Resizey somewhere in your project, like so:
import 'resizey'And that's it! 🙌
Resizey's events can be added/removed on a DOM element, just like any other native event, like click, mouseenter, or mousemove.
...
// Get your Element
const element = document.querySelector('.el')
// Define a callback when the element resizes
const resizeEventCallback = event => console.log(event)
// Subscribe
element.addEventListener('resize', resizeEventCallback)
// Unsubscribe
element.removeEventListener('resize', resizeEventCallback)In addition to resize, this library also supports resizeStart and resizeEnd
...
// Subscribe to events
element.addEventListener('resizeStart', callback)
element.addEventListener('resize', callback)
element.addEventListener('resizeEnd', callback)
// Unsubscribe events
element.removeEventListener('resizeStart', callback)
element.removeEventListener('resize', callback)
element.removeEventListener('resizeEnd', callback)Below are the events that this module provides:
| Event name | Description |
|---|---|
resizeStart |
Fires immediately (once) after the Element's size changes. |
resize |
Fires anytime the Element's size changes. |
resizeEnd |
Fires immediately (once) after the Element's size stops changing. |
For any of the events (above), this library provides a (custom) Event with the following data:
| Property | Type | Description |
|---|---|---|
| height | number |
The current height of the Element. |
| width | number |
The current width of the Element. |
| deltaHeight | number |
The change from the previous height to the current height of the Element. |
| deltaWidth | number |
The change from the previous width to the current width of the Element. |
function onResize(event) {
console.log(event.type) // => resize
console.log(event.width) // => 400
console.log(event.height) // => 200
console.log(event.deltaWidth) // => 2
console.log(event.deltaHeight) // => 1
}
const element = document.querySelector('.el')
element.addEventListener('resize', onResize)Check out this simply Storybook demo. It was built with React. However, Resizey is plain ol' vanilla JavaScript. It can work with anything JavaScript supported app, plugin, library, or framework.
Resizey uses a polling strategy via requestAnimationFrame to observe Elements and dispatch changes in size. The alternative strategy is to create and inject an iFrame clone (example: element-resize-event), allowing you to tap into the nativeresizeevent available toWindow objects.
For this library, I've opted to go with polling as it does not modify the DOM. This avoids the chances of style side-effects that may occur for Element(s), especially for children-based style rules like :only-child.
MIT © Q