useOutsideClick

useOutsideClick.tsx

import { Ref, RefObject, useEffect, useRef } from "react";

const useOutsideClick = (ref: RefObject<HTMLDivElement> , handler: (event : any | null) => void) => {
    useEffect(
        () => {
            const listener = (event: any) => {
                // Do nothing if clicking ref's element or descendent elements
                if (!ref || 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]);
}

export default useOutsideClick;