React click outside hook

#react #webdev #javascript

In case your click outside logic sucks - grab & use this one:

const useClickOutside = (ref, handleClickOutside) => {
  React.useEffect(() => {
    const handleTargetClick = e => {
      if (ref.current && !ref.current?.contains(e.target)) {
        typeof handleClickOutside === "function" && handleClickOutside(e)
      }
    }

    document.addEventListener('mousedown', handleTargetClick, true)

    return () => {
      document.removeEventListener('mousedown', handleTargetClick, true)
    }
  })
}