React useClickAnywhere Hook

React useClickAnywhere hook to detect clicks anywhere on the document. TypeScript, SSR safe, auto-cleanup.

React useClickAnywhere Hook preview

Scroll to load preview

Detect clicks outside your component or anywhere on the page. useClickAnywhere attaches a single document-level listener that fires your callback on every click. Handler ref is stable—no stale closures. Cleans up automatically on unmount. SSR safe with window check. Use it for closing dropdowns, dismissing modals, tracking user activity, or global click analytics.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:

use shadcnio to install the use-click-anywhere hook into my project

React useOnClickOutside Hook

Detect clicks outside a specific element

React useEventListener Hook

Attach any event listener safely

React useHover Hook

Track hover state on elements

React useMousePosition Hook

Track mouse coordinates

React useBoolean Hook

Boolean state with toggle helpers

React useIsClient Hook

Check if running on client

React useClickAnywhere Hook