🐡 Resizey

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
• Setup
• Usage
• Events
  • Resize Event
• Examples
• Strategy
• License

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

• Scrolley

License

MIT © Q