reactuals/dist/hooks/useOnClickOutside.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useEffect } from "react";
/**
 * Detects clicks outside a referenced element.
 * @param ref - The ref of the element
 * @param handler - The callback on outside click
 *
 * Example:
 * const ref = useRef(null);
 * useOnClickOutside(ref, () => setOpen(false));
 */
export function useOnClickOutside(ref, handler) {
    useEffect(() => {
        const listener = (event) => {
            if (!ref.current || ref.current.contains(event.target))
                return;
            handler(event);
        };
        document.addEventListener("mousedown", listener);
        document.addEventListener("touchstart", listener);
        return () => {
            document.removeEventListener("mousedown", listener);
            document.removeEventListener("touchstart", listener);
        };
    }, [ref, handler]);
}