🐡 Resizey: Resize event listeners on DOM Elements!
Alternatives To Resizey
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
8 years ago1September 27, 20153otherJavaScript
Promises and events... combined.
10 years ago3JavaScript
hasEventListener is a jQuery plugin which checks if an Object or a DOM element actually has a particular/live/delegated event listener bound to it.
Crossvent391,086533 years ago14October 18, 20164mitJavaScript
:earth_asia: Cross-platform browser event handling
Add Dom Event Listener3610,8161715 years ago5October 15, 2018mitJavaScript
add dom event listener. normalize ie and others
Smart Custom Element13
4 years ago13February 11, 2020otherJavaScript
Smart a lightweight web component library that provides capabilities for web components, such as data binding, using es6 native class inheritance. This library is focused for providing the developer the ability to write robust and native web components without the need of dependencies and an overhead of a framework.
Use Typed Event Listener12
3 days ago1mitTypeScript
React Hook for DOM event listeners with TypeScript supported
Dom Event Handler8
9 days agomitJavaScript
A generic DOM event handler implementing the EventListener interface for class methods.
5 years agomitJavaScript
🐡 Resizey: Resize event listeners on DOM Elements!
4 years ago5mitHTML
Use JS events and programmatically generated DOM elements to build a drawing application. [javascript, dom]
3 years ago2mitVue
A Simple Button component in Vue which supports disabling during asynchronous operations, customisation, size-color variations and much more
Alternatives To Resizey
Select To Compare

Alternative Project Comparisons

🐡 Resizey

Build Status npm version Coverage Status

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.

Table of contents


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.

Resize Event

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.

See also



Popular Dom Projects
Popular Event Listener Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Event Listener
Resize Events