Description

Triggers a callback whenever the user clicks outside of a element ref.
?

Reach for when

You have a popup style element which should close when the user clicks away.

Code

function useClickOutside(ref, callback) {
  useEffect(() => {
    function handleClick(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        callback();
      }
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [ref, callback]);
}