useClickOutside
Calls a callback when clicking outside the target element.
Usage
import { useClickOutside } from "@siberiacancode/reactuse";
const clickOutsideRef = useClickOutside<HTMLDivElement>(() =>
console.log("outside")
);
// or
useClickOutside(ref, () => console.log("outside"));Example
const [open, setOpen] = useState(true);
const clickOutsideRef = useClickOutside<HTMLDivElement>(() => setOpen(false));
if (!open) return <button onClick={() => setOpen(true)}>Open</button>;
return <div ref={clickOutsideRef}>Modal</div>;Type Declarations
import type { HookTarget } from "@siberiacancode/reactuse";
import type { StateRef } from "@siberiacancode/reactuse";
export interface UseClickOutside {
(target: HookTarget, callback: (event: Event) => void): void;
<Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;
}
export declare const useClickOutside: UseClickOutside;