Ember-on-resize-modifier NPM

{{on-resize}} modifier

{{on-resize}} modifier allows to use ResizeObserver to respond to an element's size changes. It relies on a single ResizeObserver instance to achieve better performance (using multiple instances can result in a noticeable performance penalty).

It has good test coverage and is ready for production👍

Installation

ember install ember-on-resize-modifier

If you need a ResizeObserver polyfill (caniuse.com):

ember install ember-resize-observer-polyfill

Usage

<div {{on-resize callback}} />

The callback will be called:

when the element is inserted to the DOM
whenever the size of the element changes
when element.style.display gets set to none (then all contentRect props will be 0)

The callback will be always called with the only argument wich is ResizeObserverEntry object.

Example

<div {{on-resize this.handleResize}}>
  Resize me
</div>

@action
handleResize({ contentRect: { width, height } }) {
  target.classList.toggle('large', width > 1200);
  target.classList.toggle('portrait', height > width);
}