click-outside-hook

import { useRef, useCallback, useEffect } from "react";

export const useClickOutside = (callback, active) => {
    const ref = useRef(null);

    const handler = useCallback(
        e => {
            if (ref.current && !ref.current.contains(e.target)) {
                callback();
            }
        },
        [callback],
    );

    useEffect(
        () => {
            if (active) {
                window.addEventListener("click", handler);

                return () => {
                    window.removeEventListener("click", handler);
                };
            }
        },
        [handler, active],
    );

    return ref;
};