@georapbox/resize-observer-element

<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)