Norwegian Parcel Mail

    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.

    Install

    npm i viz-observer

    DownloadsWeekly Downloads

    6

    Version

    1.0.0

    License

    Apache-2.0

    Unpacked Size

    21.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • samthor