codedsaif-react-hooks/hooks/useClickOutside.js

To make it easy for you to get started with GitLab, here's a list of recommended next steps.

import { useEffect, useRef } from "react";

/**
 * Custom hook that triggers a callback when a user clicks outside the referenced element.
 * @param {Function} callback - The function to call when clicking outside the element.
 * @returns {React.RefObject} - A ref that should be attached to the element you want to monitor.
 * @example
 * function Dropdown() {
 *   const [isOpen, setIsOpen] = useState(false);
 *   const dropdownRef = useClickOutside(() => setIsOpen(false));
 *   return (
 *     <div>
 *       <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
 *       {isOpen && (
 *         <ul ref={dropdownRef}>
 *           <li>Option 1</li>
 *           <li>Option 2</li>
 *           <li>Option 3</li>
 *       </ul>
 *     )}
 *   </div>
 * );
 */
function useClickOutside(callback) {
  const ref = useRef();

  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        callback?.();
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [callback]);

  return ref;
}

export default useClickOutside;