rooks
Version:
Essential React custom hooks ⚓ to super charge your components!
34 lines • 1.27 kB
TypeScript
import type { MutableRefObject } from "react";
/**
* useOutsideClick hook
* Checks if a click happened outside a Ref. Handy for dropdowns, modals and popups etc.
*
* @param ref Ref whose outside click needs to be listened to
* @param handler Callback to fire on outside click
* @param when A boolean which which activates the hook only when it is true. Useful for conditionally enable the outside click
* @see https://react-hooks.org/docs/useOutsideClick
* @example
* ```tsx
* import { useOutsideClick } from "@/hooks/useOutsideClick";
* import { useRef } from "react";
* import { noop } from "@/utils/noop";
*
* const MyComponent = () => {
* const ref = useRef<HTMLDivElement>(null);
* const [isOpen, setIsOpen] = useState(false);
* const handleOutsideClick = () => setIsOpen(false);
* useOutsideClick(ref, handleOutsideClick);
* return (
* <div ref={ref}>
* <button onClick={() => setIsOpen(true)}>Open</button>
* {isOpen && (
* <div>Inside</div>
* )}
* </div>
* );
* }
* ```
*/
declare function useOutsideClick(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent) => void, when?: boolean): void;
export { useOutsideClick };
//# sourceMappingURL=useOutsideClick.d.ts.map