viz-observer
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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.

Dependencies (0)

    Dev Dependencies (1)

    Package Sidebar

    Install

    npm i viz-observer

    Weekly Downloads

    0

    Version

    1.0.0

    License

    Apache-2.0

    Unpacked Size

    21.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • samthor