@supunlakmal/hooks/dist/hooks/user-interface-dom/useResizeObserver.js

A collection of reusable React hooks

import { useState, useEffect } from 'react';
/**
 * Custom hook that uses the ResizeObserver API to monitor changes to an element's size.
 *
 * @param {RefObject<HTMLElement | null>} ref The ref attached to the element to observe.
 * @returns {ResizeObserverEntryExtended | null} The latest ResizeObserverEntry for the observed element, or null initially.
 */
export const useResizeObserver = (ref, enabled = true) => {
    const [entry, setEntry] = useState(null);
    useEffect(() => {
        const element = ref.current;
        const hasResizeObserverSupport = typeof window.ResizeObserver !== 'undefined';
        if (!element || !hasResizeObserverSupport) {
            return;
        }
        const observer = new ResizeObserver(([entry]) => {
            // Update state with the resize observer entry
            setEntry(entry);
        });
        observer.observe(element);
        // Cleanup function to disconnect the observer
        return () => {
            observer.disconnect();
        };
    }, [ref, enabled]); // Depend on the ref
    return entry;
};
//# sourceMappingURL=useResizeObserver.js.map