React onClickOutside hook

example.js

const MyComponent = () => {
  const ref = useOnClickOutside(() => alert("sup"));
  return <div ref={ref}>Shoop</div>;
}

on-click-outside-hook.js

export const useOnClickOutside = onClickOutside => {
  const handlerRef = React.useRef(onClickOutside);
  const elementRef = React.useRef(null);
  if (onClickOutside !== handlerRef.current) {
    handlerRef.current = onClickOutside;
  }
  useEffect(() => {
    const handleClick = e => {
      if (elementRef.current.contains(e.target)) {
        return;
      }
      handlerRef.current(e);
    };

    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  return elementRef;
};