openpanel/documentation/src/hooks/use-outside-click.ts

import { RefObject } from "react";

import React from "react";

type Handler = (event: MouseEvent) => void;

export const useOutsideClick = <T extends HTMLElement = HTMLElement>(
    ref: RefObject<T>,
    callback: Handler,
) => {
    React.useEffect(() => {
        const handleClick = (event) => {
            if (ref.current && !ref.current.contains(event.target)) {
                event.preventDefault();
                callback(event);
            }
        };

        document.addEventListener("click", handleClick, true);

        return () => {
            document.removeEventListener("click", handleClick, true);
        };
    }, [ref]);

    return ref;
};