struct-ui-components/src/hooks/useClickOutside/useClickOutside.ts

A collection of reusable, customizable React components built with TypeScript, Tailwind CSS, and Storybook. Designed for modern UI development with flexibility and scalability.

import type { RefObject } from "react";
import { useEventListener } from "../";

export const useClickOutside = (
  ref: RefObject<HTMLElement>,
  cb: (event: MouseEvent | Event) => void,
): void => {
  useEventListener(
    "click",
    (e: MouseEvent | Event) => {
      if (ref.current == null || ref.current.contains(e.target as Node)) return;
      cb(e);
    },
    document,
  );
};