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.
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.
React useOnClickOutside Hook preview
Installation
Related 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.