Skip to content

Instantly share code, notes, and snippets.

@its-jman

its-jman/useResizeObserver.js

Created January 27, 2021 23:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save its-jman/0daf7bf38e7fb1b10586033ae6cb8221 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save its-jman/0daf7bf38e7fb1b10586033ae6cb8221 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. its-jman created this gist Jan 27, 2021.
    29 changes: 29 additions & 0 deletions useResizeObserver.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    import { useEffect } from "react";

    let nodeList = new Map();
    let observer = new window.ResizeObserver((entries) => {
    for (const entry of entries) {
    if (nodeList.has(entry.target)) {
    nodeList.get(entry.target)(entry);
    }
    }
    });

    export default function useResizeObserver(node, cb) {
    useEffect(() => {
    if (node && cb) {
    if (nodeList.has(node)) {
    console.warn("Warning: ResizeObserver is already observing node...");
    console.warn(node);
    } else {
    observer.observe(node);
    nodeList.set(node, cb);
    }
    }

    return function() {
    if (node) nodeList.delete(node);
    if (node && observer) observer.unobserve(node);
    };
    }, [node]);
    }