1import useClickOutside from "@repo/ui/hooks/use-click-outside";

1const ref = useClickOutside(() => setDropdownOpen(false));
2
3return (
4  <div ref={ref}>
5    {dropdownOpen && <p>Dropdown Content</p>}
6  </div>
7);

1import { useEffect, useRef } from "react";
2
3function useClickOutside(handler: () => void) {
4  const ref = useRef<HTMLDivElement>(null);
5
6  useEffect(() => {
7    const handleClickOutside = (event: MouseEvent) => {
8      if (ref.current && !ref.current.contains(event.target as Node)) {
9        handler();
10      }
11    };
12
13    document.addEventListener("mousedown", handleClickOutside);
14    return () => document.removeEventListener("mousedown", handleClickOutside);
15  }, [handler]);
16
17  return ref;
18}
19
20export default useClickOutside;