async-bounds

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

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