React component: detect when focus has been lost

ClickOutside.js

import React, { useRef, useEffect } from 'react';

/**
* Example:
* const [open, setOpen] = useState(false);
* ...
* <ClickOutside onBlur={() => setOpen(false)}>
*  <MyDropdown open={open}/>
* </ClickOutsie>
*/
function ClickOutside({ children, onBlur }) {
  /* Set the wrapper ref */
  const wrapperRef = useRef(null);
  /* Alert if clicked on outside of element */

  const handleClickOutside = event => {
    if (
      wrapperRef &&
      wrapperRef.current &&
      !wrapperRef.current.contains(event.target)
    ) {
      onBlur && onBlur();
    }
  };

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);
  
  return <div ref={wrapperRef}>{children}</div>;
}

export default ClickOutside;