React hook for detecting clicks outside of an element

useClickOutside.tsx

import { RefObject, useEffect } from 'react'

const useClickOutside = (ref: RefObject<any>, callback: Function) => {
    useEffect(() => {
        const listener = (e: MouseEvent | TouchEvent) => {
            if (!ref.current || ref.current.contains(e.target)) {
                return
            }

            callback(e)
        }

        document.addEventListener('mousedown', listener)
        document.addEventListener('touchstart', listener)

        return () => {
            document.removeEventListener('mousedown', listener)
            document.removeEventListener('touchstart', listener)
        }
    }, [ref, callback])
}

export default useClickOutside