useEventListener

A hook to manage event listeners on window, document, or elements.

Overview

useEventListener provides a declarative way to attach event listeners. It handles setup and cleanup automatically, and works with the window, document, or specific DOM elements via refs.

Demo

DOM Events

Keyboard Listener

Listening to global keydown events. Press keys to see them logged below.

Press any key...

Last Special Action

Ready

Try pressing Ctrl + B or Esc

API Reference

function useEventListener(
  eventName: string, 
  handler: (event: Event) => void, 
  element?: RefObject<HTMLElement>
): void

Parameters

Name	Type	Description
`eventName`	`string`	Name of the event to listen for (e.g., 'click', 'keydown').
`handler`	`(event) => void`	Function to call when event fires.
`element`	`RefObject`	Optional. The element to attach to. Defaults to `window`.

Usage Example

import { useRef } from 'react'
import { useEventListener } from 'react-hooks-ts'
 
function KeyLogger() {
  useEventListener('keydown', (e) => {
    console.log('Key pressed:', e.key)
  })
 
  return <div>Press any key and check console</div>
}
 
function ClickBox() {
    const ref = useRef<HTMLDivElement>(null)
    
    useEventListener('click', () => {
        console.log('Box clicked!')
    }, ref)
    
    return <div ref={ref}>Click me</div>
}