useOutsideClick

import { useOutsideClick } from "rooks";
import { useRef } from "react";

function App() {
  const ref = useRef();
  function myComponent() {
    alert("Clicked outside");
  }
  useOutsideClick(ref, myComponent);

  return (
    <div
      className="App"
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>Rooks : useOutsideClick Example</h1>

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          width: "100%",
          backgroundColor: "lightblue",
        }}
        ref={ref}
      >
        <h2 className="inside">This is inside</h2>
      </div>
    </div>
  );
}

export default App;