async-rect

async-rect

Asynchronous version of getBoundingClientRect(), built on top of IntersectionObserver.

It works the same as getBoundingClientRect(), except you don't need to worry about layout thrashing or forcing layouts/reflows, because this function asynchronously waits for the next browser layout pass instead of synchronously forcing layout.

This library also works around some browser bugs.

Usage

npm install async-rect

import asyncGetBoundingClientRect from 'async-rect'

(async () => {
  let element = document.querySelector('#myElement')
  let rect = await asyncGetBoundingClientRect(element)
  console.log(rect)
  // { width: 100, height: 50, left: 0, top: 0, bottom: 50, right: 100 }
})()

Or use as a script tag:

<script src="https://unpkg.com/async-rect/dist/async-rect.min.js"></script>
<script>
 asyncGetBoundingClientRect(element).then(/* ... */)
</script>

Requirements

This library requires both IntersectionObserver and Promises. If you need to support browsers without those features, please use the polyfills:

• IntersectionObserver polyfill
• es6-promise polyfill

This library is written in ES5, so it will work in older browsers assuming you have the polyfills.

Limitations

This library creates a new IntersectionObserver object and then disconnect()s it when it's done. As an optimization, you may want to re-use the same IntersectionObserver object and manage its lifecycle yourself. (Note though that re-using the same IntersectionObserver object will not work if you want to invoke the function twice on the same element.) You may also want to do this if you are interested in using a root element other than the viewport, or if you want to know the rootBounds as well, or if you have some other particular use case.

In those cases, the library is quite small, so feel free to fork as you see fit! 😊

Building

npm run build

Testing

npm test