focalxaiinspection/src/lib/hooks/useOnClickOutSide.js

Focalx AI Inspection

import { useEffect } from "react";

const useOnClickOutSide = (open, ref, handler) => {
  useEffect(() => {
    const checkIfClickedOutside = (e) => {
      if (
        open &&
        ref.current &&
        !ref.current.contains(e.target)
      ) {
        handler();
      }
    };

    document.addEventListener("click", checkIfClickedOutside);

    return () => {
      document.removeEventListener("click", checkIfClickedOutside);
    };
  }, [handler, open, ref]);
};

export default useOnClickOutSide;