React Hook: Click Away

useClickAway.js

function useClickAway(callback) {
  const savedCallback = useRef()
  const ref = createRef()
  function handleClickOutside(event) {
    if (ref && ref.current && !ref.current.contains(event.target)) {
      savedCallback.current()
    }
  }
  useEffect(
    () => {
      savedCallback.current = callback
    },
    [callback]
  )
  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  })
  return ref
}

How to use:

function Dropdown() {
  const [dropdownOpen, setDropdownOpen] = useState(false)
  const ref = useClickAway(() => {
    if (dropdownOpen) setDropdownOpen(false)
  })
  return dropdownOpen && <div ref={ref}>Dropdown</div>
}