Simple react hook implementation for detecting click of outside of the given DOM

useOutsideClickHandler.ts

import { useEffect, useRef } from 'react'

export function useOutsideClickHandler<T extends HTMLElement>(
  callback: (e: MouseEvent) => void
) {
  const ref = useRef<T>(null)

  useEffect(() => {
    function handleClick(e: MouseEvent): void {
      if (!ref.current?.contains(e.target as Node)) {
        callback(e)
      }
    }

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

  return ref
}

Example

function Component() {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
  const modalRef = useOutsideClickHandler<HTMLDivElement>(() => setIsModalOpen(true))
  
  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open</button>
      {isModalOpen && <div ref={modalRef}>I'm Modal</div>}
    </div>
  )
}