rooks/dist/esm/hooks/useResizeObserverRef.js

Essential React custom hooks ⚓ to super charge your components!

import { noop } from "../utils/noop";
import { useCallback, useEffect, useState } from "react";
import { useFreshTick } from "./useFreshTick";
var config = {
    box: "content-box",
};
/**
 *
 * useResizeObserverRef hook
 *
 * Returns a resize observer for a React Ref and fires a callback
 * https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
 *
 * @param {ResizeObserverCallback} callback Function that needs to be fired on resize
 * @param {ResizeObserverOptions} options An options object allowing you to set options for the observation
 * @returns {[CallbackRef]} callbackref
 * @see https://react-hooks.org/docs/useResizeObserverRef
 */
function useResizeObserverRef(callback, options) {
    if (options === void 0) { options = config; }
    var _a = useState(null), node = _a[0], setNode = _a[1];
    var freshCallback = useFreshTick(callback);
    useEffect(function () {
        if (node) {
            // Create an observer instance linked to the callback function
            var observer_1 = new ResizeObserver(freshCallback);
            // Start observing the target node for resizes
            observer_1.observe(node, options);
            return function () {
                observer_1.disconnect();
            };
        }
        return noop;
    }, [node, freshCallback, options]);
    var ref = useCallback(function (node) {
        setNode(node);
    }, []);
    return [ref];
}
export { useResizeObserverRef };