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