@figliolia/react-hooks/dist/mjs/Hooks/useClickOutside.js

A small collection of simple React Hooks you're probably rewriting on a regular basis

import { useCallback, useEffect, useRef } from "react";
export const useClickOutside = ({ callback, open = true, refCallback = false, }) => {
    const node = useRef(null);
    const nodeRef = useRef(null);
    const ref = useCallback((node) => {
        nodeRef.current = node;
    }, []);
    const getNode = useCallback(() => node.current || nodeRef.current, []);
    const onClickOutside = useCallback((e) => {
        const node = getNode();
        if (!node) {
            return;
        }
        if (!node.contains(e.target)) {
            callback(e);
        }
    }, [callback, getNode]);
    useEffect(() => {
        if (open) {
            document.addEventListener("click", onClickOutside, { passive: true });
            document.addEventListener("focusin", onClickOutside, { passive: true });
        }
        else {
            document.removeEventListener("click", onClickOutside);
            document.removeEventListener("focusin", onClickOutside);
        }
        return () => {
            document.removeEventListener("click", onClickOutside);
            document.removeEventListener("focusin", onClickOutside);
        };
    }, [onClickOutside, open]);
    if (refCallback) {
        return ref;
    }
    return node;
};