Hook that adds a click listener outside of an element.

useClickOutside.tsx

import {DependencyList, useCallback, useEffect, useRef} from 'react';

export const useClickOutside = <T extends (...args: any[]) => any>(
    cb: T,
    dep: DependencyList
) => {
    const ref = useRef<HTMLElement>(null);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const callback = useCallback(cb, dep);

    useEffect(() => {
        const listener = (e: MouseEvent) => {
            if (!ref.current?.contains(e.target as Node)) {
                callback(e);
            }
        };

        document.addEventListener('click', listener);
        return () => document.removeEventListener('click', listener);
    }, [ref, callback]);

    return ref;
};