useClickOutside
Overview
useClickOutside listens for document-level pointerdown events and calls a handler only when the event target is outside the referenced element.
Signature
function useClickOutside<T extends HTMLElement>(
ref: { readonly current: T | null },
onOutside: (event: PointerEvent) => void,
enabledOrOptions?: boolean | { enabled?: boolean; onError?: (error: unknown) => void },
): void;Parameters
ref identifies the inside region. onOutside follows the latest commit. A boolean enables the listener directly; the object form supports enabled and an onError observer. enabled defaults to true.
Returns
Nothing. The document listener is managed by the Hook.
Behavior
Events with non-Node targets are ignored. A missing element is not treated as an outside hit. Disabling or unmounting removes the listener. If onOutside throws, onError runs before the original error is rethrown.
SSR / RSC
When document is unavailable, the effect performs no work. Call the Hook in a Client Component.
Example
Composition
Use useBoolean for open state and pass its stable setFalse action as the handler.