useClickOutside Hook

A custom React hook to detect clicks outside a specified element and trigger a handler.

import { useEffect } from "react";
import { useClickOutside } from "./useClickOutside";
import { useRef } from "react";

export default function App() {
  const ref = useRef(null);

  useClickOutside(ref, () => {
    console.log("Clicked outside");
  });

  return <div ref={ref}>Click outside this box to trigger the handler.</div>;
}

export function useClickOutside(
    ref: RefObject<HTMLElement>,
    handler: () => void
) {
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (ref.current && !ref.current.contains(event.target as Node)) {
                handler();
            }
        };

        document.addEventListener("mousedown", handleClickOutside);
        return () =>
            document.removeEventListener("mousedown", handleClickOutside);
    }, [ref, handler]);
}