Neanderthal Painting Monet
Learn how companies like Phone2Action are using npm in their front-end developmentJoin the conversation »

async-bounds

1.5.0 • Public • Published

async-bounds

Uses IntersectionObserver to get the bounds of an element without causing browser re-layout as an alternative to element.getBoundingClientRect()

npm version

Install

npm install async-bounds --save

Usage

Single element

import asyncBounds from 'async-bounds';
asyncBounds(element).then(bounds => {
  const { x, y, width, height } = bounds;
  console.log(bounds);
});

Or async

import asyncBounds from 'async-bounds';
const { x, y, width, height } = await getBoundingClientRectsAsync(element);

Or Multiple elements

import asyncBounds from 'async-bounds';
 
// Spread array in, array out
const elements = document.querySelectorAll('div');
getBoundingClientRectsAsync(...elements).then(boundsArray => {
  for (const bounds of boundsArray) {
    const { x, y, width, height } = bounds;
  }
});

Install

npm i async-bounds

DownloadsWeekly Downloads

6

Version

1.5.0

License

MIT

Unpacked Size

4.22 kB

Total Files

6

Last publish

Collaborators

  • avatar