useClickOutside

useClickOutside<T>(ref, handler, options?): void

Defined in: src/hooks/useClickOutside/useClickOutside.ts:55

Fire a callback when a click occurs outside the referenced element(s).

Accepts either a single ref or an array of refs. The handler fires only when the click lands outside ALL provided refs — useful for popover + trigger pairs where clicking either should be considered “inside”.

Defaults to mousedown so the handler runs before click. SSR-safe; cleans up on unmount and when enabled flips to false.

Type Parameters

T

T extends HTMLElement = HTMLElement

Parameters

ref

RefObject<T | null> | RefObject<HTMLElement | null>[]

handler

(event) => void

options?

UseClickOutsideOptions = {}

Returns

void

Example

const ref = useRef<HTMLDivElement>(null);
useClickOutside(ref, () => setOpen(false), { enabled: isOpen });

return <div ref={ref}>...</div>;