hooks-belt/dist/hooks/useOnClickOutside.js

A comprehensive collection of useful React hooks for common use cases

import { useEffect } from 'react';
/**
 * A hook that detects clicks outside of a specified element.
 * Useful for closing modals, dropdowns, or other UI elements when clicking outside.
 *
 * @param ref - A ref to the element to detect clicks outside of
 * @param handler - The function to call when a click outside is detected
 *
 * @example
 * ```tsx
 * const modalRef = useRef<HTMLDivElement>(null)
 * const [isOpen, setIsOpen] = useState(false)
 *
 * useOnClickOutside(modalRef, () => setIsOpen(false))
 *
 * return (
 *   {isOpen && (
 *     <div ref={modalRef} className="modal">
 *       Modal content
 *     </div>
 *   )}
 * )
 * ```
 */
export function useOnClickOutside(ref, handler) {
    useEffect(() => {
        const listener = (event) => {
            const el = ref?.current;
            if (!el || el.contains(event?.target || null)) {
                return;
            }
            handler(event);
        };
        document.addEventListener('mousedown', listener);
        document.addEventListener('touchstart', listener);
        return () => {
            document.removeEventListener('mousedown', listener);
            document.removeEventListener('touchstart', listener);
        };
    }, [ref, handler]);
}
//# sourceMappingURL=useOnClickOutside.js.map