@telenko/onresize v1.0.1

General description

Library provides attribute-matcher to observe elements resizing declaratively. To read more about matchers take a look at: https://github.com/telenko/matcher-js https://medium.com/@mangolik931/matcherjs-new-way-of-making-dom-extensions-ddb8a6f088ec

Purpose of creating

Makes much easier to observe elements resize by declarative API. Library uses ResizeObserver polyfill under the hood.

API

1) Install library

npm i @telenko/onresize

2) Include library to your code-base

import '@telenko/onresize';

3) Use 'observe-resize' attribute for your elements

<div id="container" observe-resize onresize="alert('I am resized!!')">
  <custom-element observe-resize>I'm custom element and can be resized!</custom-element>
</div>

4) Listen for 'resize' event

const container = document.getElementById("container");
container.addEventListener("resize", event => {
  const { left, top, width, height } = event.detail;
});
container.style.width = "200px";
//callback called
container.style.width = "250px";
//callback called

5) After removing 'observe-resize' attribute observer will disconnect

container.removeAttribute("observe-resize");
container.style.width = "100px";//no callback on resize called anymore

Catches RESIZE when

Since matcher is based on ResizeObserver polyfill - please take a look at it first to know behavior. Generally resize will be emitted EACH time when real size of element on screen was changed. It can be after such events: 1) Direct width/height was changed for element 2) Window resize caused resize of element 3) Other "class" or "style" rules was changed for element 4) Same rules for children/parents of observed element IF these changes caused real resize