Join our Discord Community
shadcn.io
AIBackgroundBlocksButtonsChartsComponentsHooksMCPPromptsShadcn UIShadersTextTheme
Previous: React useBoolean HookNext: React useCopyToClipboard Hook

React useClickAnyWhere Hook

React useClickAnyWhere hook for global click detection. Track document clicks with TypeScript support for Next.js and React applications.

Need help with global click detection?

Join our Discord community for help from other developers.


Ever tried to close a dropdown when users click outside? You know the drill—add a ref, check if the click target contains the element, handle edge cases with portals, and don't forget cleanup. This free open source React useClickAnyWhere custom hook handles all that document-level click detection so you can focus on your UI logic instead of wrestling with event listeners in your React applications.

useClickAnyWhere showcase

Global click detection with clean event handling:

Loading component...

This free open source React hook simplifies document-wide click tracking with TypeScript support for modern JavaScript applications. Whether you're building dropdowns, modals, or context menus in your Next.js projects, this React hook keeps your click detection clean and reliable.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-click-anywhere.json
npx shadcn@latest add https://www.shadcn.io/registry/use-click-anywhere.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-click-anywhere.json
bunx shadcn@latest add https://www.shadcn.io/registry/use-click-anywhere.json

Why most global click detection sucks

Look, you could manually attach event listeners to the document, track refs, and handle cleanup yourself in React applications. But after debugging the third "why isn't my listener being removed" memory leak, you'll appreciate having this handled properly.

Most developers forget to remove event listeners, causing memory leaks in Next.js projects. Or they use inline functions that re-register listeners on every render, killing performance. Some skip the ref pattern and wonder why their handlers have stale closure values in TypeScript components.

The React hook automatically manages the event listener lifecycle—no more forgotten removeEventListener calls causing memory leaks. Plus it handles the ref pattern correctly so your handler always has the latest closure values in JavaScript applications.

This free open source React hook handles the document event management while you focus on building features. Whether you're creating React applications, Next.js projects, or TypeScript codebases, this custom hook keeps your global click detection reliable.

Features

  • Document-wide click detection with automatic event listener attachment to document in React applications
  • Event information access providing full MouseEvent details including coordinates and target for TypeScript components
  • Automatic cleanup with proper event listener removal when component unmounts in Next.js projects
  • TypeScript support with complete MouseEvent type definitions and handler typing
  • SSR compatible designed for Next.js server-side rendering with proper window detection
  • Lightweight implementation using optimized event listener patterns for performance in JavaScript frameworks
  • Free open source designed for modern React development workflows

When you'll actually use this

Real talk—this isn't for button clicks or form submissions in React applications. For component-specific clicks, use onClick handlers. But when you need to know about clicks anywhere on the page, this React hook shines in Next.js projects.

Perfect for:

  • Modal and dropdown closing - Detect clicks outside components built with Next.js and TypeScript
  • Global analytics tracking - Monitor user interaction patterns using React event handling
  • Debugging and development - Track click events during development with JavaScript debugging tools
  • Custom context menus - Close menus on outside clicks with proper cleanup in React applications
  • Interactive tutorials - Guide users through clicks with visual feedback in TypeScript components
  • Click-based games - Detect clicks anywhere for game mechanics in React applications

Common gotchas

Performance anxiety is usually unfounded: Document-level click listeners are lightweight in React applications, but if your handler does heavy computation, consider debouncing or throttling it in Next.js projects.

Stale closures don't happen here: The React hook uses a ref pattern to ensure your callback always has the latest closure values without re-registering the event listener in TypeScript components.

SSR hydration issues are handled: The hook checks for window availability automatically, so it works fine with Next.js server-side rendering without hydration mismatches in JavaScript applications.

Event propagation still matters: If something calls stopPropagation() on a click event, it won't reach the document level in React components. Keep this in mind when debugging missing clicks.

Memory leaks from forgotten cleanup: The most common mistake is manually managing document listeners without proper cleanup in TypeScript projects. This React hook handles the lifecycle automatically.

API Reference

useClickAnyWhere

useClickAnyWhere(handler: (event: MouseEvent) => void): void

Parameters

ParameterTypeDescription
handler(event: MouseEvent) => voidFunction called when any click is detected on the document

Handler Event Properties

The handler receives a standard MouseEvent with properties including:

PropertyTypeDescription
clientXnumberX coordinate relative to viewport
clientYnumberY coordinate relative to viewport
targetEventTarget | nullElement that was clicked
buttonnumberMouse button pressed (0 = left, 1 = middle, 2 = right)

useOnClickOutside

Detect clicks outside specific elements with ref-based targeting

useEventListener

Custom event listener management with automatic cleanup

useHover

Track hover state with mouse enter and leave detection

useMousePosition

Track mouse cursor position with real-time coordinates

useIntersectionObserver

Detect element visibility with intersection observer API

useBoolean

Boolean state management with convenient toggle helpers

Questions you might have

React useBoolean Hook

React useBoolean hook with true/false/toggle helpers. Clean boolean state management with TypeScript support for Next.js and React applications.

React useCopyToClipboard Hook

React useCopyToClipboard hook for clipboard operations. Copy text with automatic feedback state using TypeScript support for Next.js apps.