<resize-observer>

A custom element that offers a declarative interface to the ResizeObserver API.

API documentation • Demo

Install

$ npm install --save @georapbox/resize-observer-element

Usage

Script

import { ResizeObserverElement } from './node_modules/@georapbox/resize-observer-element/dist/resize-observer.js';

// Manually define the element.
ResizeObserverElement.defineCustomElement();

Alternatively, you can import the automatically defined custom element.

import './node_modules/@georapbox/resize-observer-element/dist/resize-observer-defined.js';

Markup

<resize-observer>
  <div>Element to observe for resizing</div>
</resize-observer>

API

Properties

| Name | Reflects | Type | Default | Description | | ---- | -------- | ---- | ------- | ----------- | | disabled | ✓ | Boolean | false | Defines if the resize observer is disabled or not. |

All of the above properties reflect their values as HTML attributes to keep the element's DOM representation in sync with its JavaScript state.

Slots

| Name | Description | | ---- | ----------- | | (default) | The element(s) to observe. It can be one or more Element. |

Events

resize-observer:resize - Emitted when the element is resized. A list of ResizeObserverEntry objects is attached to event.detail, with information about the target element and its dimensions.

document.querySelector('resize-observer').addEventListener('resize-observer:resize', evt => {
  console.log(evt.detail); // => { entries: [ResizeObserverEntry] }
});

Changelog

For API updates and breaking changes, check the CHANGELOG.

Browser support

Browsers without native custom element support require a polyfill.

• Firefox
• Chrome
• Microsoft Edge
• Safari

License

The MIT License (MIT)