Shadcn.io is not affiliated with official shadcn/ui
React useEventListener Hook
React useEventListener hook for declarative DOM event handling. Auto-cleanup, TypeScript event maps, supports window/document/element refs.
React useEventListener Hook preview
Attach DOM event listeners the React way. useEventListener handles addEventListener/removeEventListener with automatic cleanup on unmount. Full TypeScript support with event type inference for Window, Document, HTMLElement, SVGElement, and MediaQueryList events. No stale closure issues. Pass a ref for element-specific events or omit for window events. Supports all addEventListener options like capture, passive, and once. Perfect for keyboard shortcuts, scroll handlers, resize observers, or any DOM event. SSR safe—only attaches listeners on client. Works with Next.js App Router.
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-event-listener hook into my projectRelated Components
React useClickAnywhere Hook
Detect clicks anywhere on page
React useOnClickOutside Hook
Detect clicks outside element
React useEventCallback Hook
Stable callback reference
React useWindowSize Hook
Track window dimensions
React useMediaQuery Hook
Respond to CSS media queries
React useScrollLock Hook
Lock body scroll
FAQ
Was this page helpful?
Sign in to leave feedback.