useClickAway Hook React

import { useEffect } from "react";

const useClickAway = (ref, onClickAway) => {
  useEffect(() => {
    const handleClick = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        onClickAway();
      }
    };

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, [ref, onClickAway]);
};

// Usage
const ClickAwayExample = () => {
  const handleClickAway = () => {
    console.log("Clicked away from the element.");
  };

  const targetRef = useRef();
  useClickAway(targetRef, handleClickAway);

  return (
    <div>
      <div
        ref={targetRef}
        style={{ width: "100px", height: "100px", background: "lightgray" }}
      >
        Click Inside Me
      </div>
    </div>
  );
};