Handling outside click with hook

useOutsideClickHandler.ts

import React, { useEffect } from 'react';
import get from 'lodash/get';
import noop from 'lodash/noop';

interface useOutsideClickHandlerProps {
    node: any, // reference to top level node / element in the collapsible component.
    onOutsideClick: (data?: any) => void,
    onInsideClick?: (data?: any) => void,
}

const useOutsideClickHandler = ({ node, onOutsideClick, onInsideClick }: useOutsideClickHandlerProps) => {
    onInsideClick = onInsideClick || noop;

    const handleClick = (e: any) => {
        const current: any = get(node, 'current');
        if (!current) return;

        if (current.contains(e.target)) {
            // inside click
            onInsideClick && onInsideClick();
            return;
        }
        // outside click
        onOutsideClick();
    };

    useEffect(() => {
        document.addEventListener("mousedown", handleClick);

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

export default useOutsideClickHandler;