yrik 2fd3c19a01 提交 преди 4 години
..
CHANGELOG.md eec7f449c9 first commit преди 4 години
LICENSE.md eec7f449c9 first commit преди 4 години
README.md eec7f449c9 first commit преди 4 години
index.cjs.js eec7f449c9 first commit преди 4 години
index.es.mjs eec7f449c9 first commit преди 4 години
package.json 2fd3c19a01 提交 преди 4 години

README.md

Watch Size PostCSS

NPM Version Build Status Support Chat

Watch Size lets you watch the size changes of a DOM element using the watchSize function.

Usage

Add Watch Size to your project:

npm install watch-size

Use watchSize() to rewrite your queries:

import watchSize from 'watch-size';

const stop = watchSize(
  document.querySelector('.box:nth-child(2)')
  ({ width, height }) => { /* callback */ }
);

/* use stop() to end listening */

How does it work?

The watchSize function attaches hidden, over-sized DOM elements to your target with scroll listeners that are triggered whenever the element resizes. This allows the listener to avoid polling, and to truly respond to size changes. This technique can be used in all browsers going back to Internet Explorer 9.

The entire script is about 400 bytes when minified and gzipped.