useOutsideClick Hook React

import { useEffect } from "react";

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

    document.addEventListener("click", handleClick);

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

// Usage
const OutsideClickExample = () => {
  const handleClickOutside = () => {
    console.log("Clicked outside the element.");
  };

  const targetRef = useRef();
  useOutsideClick(targetRef, handleClickOutside);

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