ember-resize-modifier

Resize Modifier for Ember.js Applications using ResizeObserver.

Check out the documentation!

We adhere to the Ember Community Guidelines for our Code of Conduct.

Compatibility

• Ember.js v4.12 or above
• Embroider or ember-auto-import v2

Installation

pnpm add ember-resize-modifier

Or with npm:

npm install ember-resize-modifier

Usage

Add the didResize modifier to any element and pass a callback handler:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { didResize } from 'ember-resize-modifier';

export default class ResizeDemo extends Component {
  @tracked width = 0;
  @tracked height = 0;

  onResize = (entry) => {
    this.width = Math.round(entry.contentRect.width);
    this.height = Math.round(entry.contentRect.height);
  };

  <template>
    <div {{didResize this.onResize}}>
      {{this.width}} × {{this.height}}
    </div>
  </template>
}

You can also pass options to ResizeObserver.observe():

import Component from '@glimmer/component';
import { didResize } from 'ember-resize-modifier';

export default class BorderBoxDemo extends Component {
  options = { box: 'border-box' };

  onResize = (entry) => {
    const size = entry.borderBoxSize?.[0];
    console.log(`Border box: ${size.inlineSize} × ${size.blockSize}`);
  };

  <template>
    <div {{didResize this.onResize this.options}}>
      Observing border-box changes
    </div>
  </template>
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.