use-outside-click.ts

/**
 * Handle clicks outside of an element.
 * This is useful for closing a modal by clicking outside of the modal.
 * @param callback - The callback function to run when clicking outside of an element
 */
export function useOutsideClick<E extends HTMLElement = HTMLElement>(callback: () => unknown) {
  const container = useRef<E | null>(null);

  useEffect(() => {
    const handler = (event: MouseEvent) => {
      if (!container.current) return;

      if (!container.current.contains(event.target as HTMLElement)) {
        callback();
      }
    };

    document.addEventListener("click", handler);
    return () => void document.removeEventListener("click", handler);
  }, []);

  return container;
}