useClickOutside & useEventListener in React

import { useEffect, useRef, RefObject } from 'react'

function useClickOutside<T extends HTMLElement>(
  ref: RefObject<T>,
  onOutside: (e: MouseEvent | TouchEvent) => void,
) {
  useEffect(() => {
    const handler = (e: MouseEvent | TouchEvent) => {
      const el = ref.current
      if (!el || el.contains(e.target as Node)) return
      onOutside(e)
    }
    document.addEventListener('mousedown', handler)
    document.addEventListener('touchstart', handler)
    return () => {
      document.removeEventListener('mousedown', handler)
      document.removeEventListener('touchstart', handler)
    }
  }, [ref, onOutside])
}

// Usage
function Dropdown() {
  const ref = useRef<HTMLDivElement>(null)
  const [open, setOpen] = useState(false)
  useClickOutside(ref, () => setOpen(false))
  return <div ref={ref}>{open && <Menu />}</div>
}