Awesome Open Source
Awesome Open Source

🐡 Resizey

Build Status npm version Coverage Status

Resize event listeners on DOM Elements!

Features

  • 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

Installation

To start using resizey, add it to your project using npm or yarn by running:

// npm
npm install --save resizey

// yarn
yarn add resizey

Setup

To start listening to Element resize events, simply import Resizey somewhere in your project, like so:

import 'resizey'

And that's it! 🙌

Usage

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)

Events

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)

Examples

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.

Strategy

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

License

MIT © Q


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,513,654) 
Events (2,108) 
Resize (259) 
Listener (201) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194