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';
const elements = document.querySelectorAll('div');
getBoundingClientRectsAsync(...elements).then(boundsArray => {
for (const bounds of boundsArray) {
const { x, y, width, height } = bounds;
}
});
