useClickOutside API

useClickOutside

Detects clicks outside of the specified element(s). Uses two-phase detection (pointerdown → pointerup) to prevent false positives when users drag from inside to outside an element.

capture

Use capture phase for event listeners. Ensures detection works even when inner elements call stopPropagation.

Default: true

touchScrollThreshold

Touch movement threshold in pixels. If finger moves more than this distance, it's treated as a scroll, not a tap. Only applies to touch interactions.

Default: 30

detectIframe

Detect focus moving to iframes as an outside click. Useful when iframes are outside the target elements.

Default: false

ignore

Elements to ignore when detecting outside clicks. Accepts element refs, getters, or CSS selector strings. Clicks on these elements (or their descendants) won't trigger the handler. Note: CSS selectors cannot match across Shadow DOM boundaries due to browser limitations. Use element refs instead when ignoring shadow hosts.

bounds

Use bounding rect instead of DOM containment to detect outside clicks. When true, checks if click coordinates are outside the element's bounding box. Useful for native <dialog> elements where backdrop clicks have the dialog as target.

Default: false

isActive

Whether the listener is currently active

isPaused

Whether the listener is currently paused

pause

Pause listening (stops detection but keeps state)

resume

Resume listening

stop

Stop listening and clean up