react-hooks-bank/lib/useClickOutside.js

A collection of **powerful, reusable custom React hooks** for complex, non-trivial interactions that go beyond React’s native features.

import { useEffect } from "react";
export function useClickOutside(ref, callback) {
    useEffect(function () {
        var handleClickOutside = function (event) {
            if (ref.current && !ref.current.contains(event.target)) {
                callback();
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
    }, [ref, callback]);
}