Wrapper for catching blur and click outside event. Useful while building dropdowns and many more!

FocusOutside.jsx

import { useState } from "react";

const FocusOutside = ({clickedOutside, ...props})=>{
  
  let _timeoutID;

  const [IsManagingFocus, setIsManagingFocus] = useState(false);

  const _onBlur = ()=>{
    _timeoutID = setTimeout(() => {
      if (IsManagingFocus) {
        setIsManagingFocus(false)
        clickedOutside()
      }
    }, 0);
  }

  const _onFocus = ()=>{
    clearTimeout(_timeoutID);
    if (!IsManagingFocus) {
      setIsManagingFocus(true)
    }
  }

  return (
      <div
        onBlur={_onBlur}
        onFocus={_onFocus}
        >{props.children}</div>
    );
}

export default FocusOutside;