Shadcn.io is not affiliated with official shadcn/ui
React useOnClickOutside Hook
React useOnClickOutside hook for detecting clicks outside elements. Dismiss modals, dropdowns, popovers. TypeScript ready.
React useOnClickOutside Hook preview
Detect clicks outside any element with useOnClickOutside. Pass a ref and handler—fires when user clicks anywhere except inside that element. Supports single ref or array of refs for complex UIs with multiple exclusion zones. Configurable event types: mousedown, mouseup, touchstart, touchend, focusin, focusout. Essential for modals, dropdowns, context menus, search overlays, and any dismissible UI. Ignores clicks on disconnected DOM nodes for edge case safety. SSR safe—event listeners attach client-side only. Works with Next.js App Router, portals, and any React framework.
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-on-click-outside hook into my projectRelated Components
React useClickAnywhere Hook
Detect clicks anywhere on page
React useEventListener Hook
Declarative DOM event handling
React useHover Hook
Track hover state on elements
React useToggle Hook
Toggle between custom values
React useBoolean Hook
Boolean state with helpers
React useScrollLock Hook
Lock body scroll for modals
FAQ
Was this page helpful?
Sign in to leave feedback.