ClickOutside.ts

/**
 * This component comes from https://github.com/tj/react-click-outside.
 *
 * It was copied and converted to use hooks and TypeScript
 */
 
import React, { useEffect, useRef } from "react";

 
export interface Props {
    children: React.ReactNode;
    onClickOutside(e: TouchEvent | MouseEvent): void;
}


const ClickOutside = ({
    children,
    onClickOutside,
    ...props
}: Props): JSX.Element => {
    const container = useRef<HTMLDivElement>(null);
    const isTouch = useRef(false);

    const handle = (e: TouchEvent | MouseEvent) => {
        if (e.type === "touchend") isTouch.current = true;
        if (e.type === "click" && isTouch.current) return;
        const el = container.current;
        if (el && !el.contains(e.target as HTMLElement)) onClickOutside(e);
    };

    useEffect(() => {
        document.addEventListener("touchend", handle, true);
        document.addEventListener("click", handle, true);

        return () => {
            document.removeEventListener("touchend", handle, true);
            document.removeEventListener("click", handle, true);
        };
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <div {...props} ref={container}>
            {children}
        </div>
    );
};

export default ClickOutside;