This is an ES Module which exports the default method vizObserver
.
It notifies you when an element is resized or moved on a page, including when it appears or disappears (similar to but not quite being added/removed from the DOM).
See this post for an explanation, or see this animation:
Usage
Install as "viz-observer".
import vizObserver from 'viz-observer';
const cleanup = vizObserver(yourElement, (rect) => {
console.info('element is now at', rect);
});
// later
cleanup();
This returns a cleanup method which you must call when done.
You can pass an AbortSignal
as {signal}
in the third argument:
const ac = new AbortController();
vizObserver(yourElement, yourCallback, {signal: ac.signal});
// later
ac.abort();
Requirements
This requires IntersectionObserver
, which is pretty widely supported.
It works without ResizeObserver
in a slightly crippled mode just to support Safari 12.x, as it was the only browser to introduce InteresectionObserver
before ResizeObserve
.
It won't report elements shrinking—only elements growing, moving or being removed from the page.
Notes
This works totally fine inside Shadow DOM. It's how the author uses it: I report the location of interesting elements and "attach" unrelated elemnents to them, such as for a popup or tooltip.