use-outside-click

use-outside-click.ts

import React from "react";

export const useOutsideClick = (
  refs: React.MutableRefObject<any>[],
  callback: () => void
) => {
  React.useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      if (
        refs.every(
          (ref) =>
            ref.current &&
            !ref.current.contains(e.target as Node) &&
            ref.current !== e.target
        )
      ) {
        callback();
      }
    };

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, [refs, callback]);
};