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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useClickOutside = void 0;
const react_1 = require("react");
const useClickOutside = ({ callback, open = true, refCallback = false, }) => {
    const node = (0, react_1.useRef)(null);
    const nodeRef = (0, react_1.useRef)(null);
    const ref = (0, react_1.useCallback)((node) => {
        nodeRef.current = node;
    }, []);
    const getNode = (0, react_1.useCallback)(() => node.current || nodeRef.current, []);
    const onClickOutside = (0, react_1.useCallback)((e) => {
        const node = getNode();
        if (!node) {
            return;
        }
        if (!node.contains(e.target)) {
            callback(e);
        }
    }, [callback, getNode]);
    (0, react_1.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;
};
exports.useClickOutside = useClickOutside;