Custom hook that calls handler when a click is detected outside of the given ref element

use-on-click-outside.ts

import { useEffect } from "preact/hooks";

// Custom hook that calls handler when a click is detected outside of the given ref element
const useOnClickOutside = (
  ref: { current: HTMLElement | null },
  handler: (event: MouseEvent | TouchEvent) => void
) => {
  useEffect(() => {
    // Listener that calls handler if click is outside of ref element
    const listener = (event: MouseEvent | TouchEvent) => {
      // Do nothing if clicking inside the ref element or its children
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return;
      }
      handler(event);
    };

    // Add event listeners for mouse and touch events
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    // Cleanup event listeners on unmount
    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
};

export default useOnClickOutside;