@tamilvananmurugan/xlibs/components/shared/hooks.ts

Comprehensive UI component library with Aceternity, MagicUI, and ShadCN components

import React, { useEffect } from "react";

/**
 * Custom hook to detect clicks outside of a referenced element
 * @param ref - React ref object pointing to the element to monitor
 * @param callback - Function to call when a click outside is detected
 */
export const useOutsideClick = (
  ref: React.RefObject<HTMLDivElement>,
  callback: Function
) => {
  useEffect(() => {
    const listener = (event: any) => {
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      callback(event);
    };

    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, callback]);
};