@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
32 lines • 1.12 kB
TypeScript
import * as React from "react";
/**
* Detects clicks or touch events outside a referenced element.
*
* @remarks
* This hook is commonly used for implementing dropdown menus, modals, and popovers
* that should close when the user interacts outside their boundaries. It listens
* to both mouse and touch events to ensure broad device compatibility.
*
* The event listeners are automatically cleaned up when the component unmounts.
*
* @param ref - A ref object pointing to the element to monitor.
* @param handler - Callback invoked when a click or touch occurs outside the element.
*
* @example
* ```tsx
* function Dropdown() {
* const [isOpen, setIsOpen] = useState(false);
* const dropdownRef = useRef<HTMLDivElement>(null);
*
* useOnClickOutside(dropdownRef, () => setIsOpen(false));
*
* return (
* <div ref={dropdownRef}>
* {isOpen && <DropdownMenu />}
* </div>
* );
* }
* ```
*/
export declare function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;
//# sourceMappingURL=useOnClickOutside.d.ts.map