{{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);
}

Related addons

• ember-resize-observer-component
• ember-resize-observer-service
• ember-resize-observer-polyfill

Compatibility

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v12 or above

• Modern browsers (for IE 11 install polyfill)

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.