useEventListener

A hook that provides a declarative way to attach event listeners to DOM elements. Perfect for handling browser events, custom events, and global event listeners.

Parameters

eventName: string - Name of the event to listen for
callback: EventListener - Function to handle the event
element?: HTMLElement | Window | Document | null - Target element (defaults to window)

Usage


import { useEventListener } from '@rhinolabs/react-hooks';
 
function KeyLogger() {
  const handleKeyPress = (event: KeyboardEvent) => {
    console.log(`Key pressed: ${event.key}`);
  };
 
  useEventListener('keypress', handleKeyPress);
 
  return <div>Press any key (check console)</div>;
}

Advanced Usage with Element Target


import { useEventListener } from '@rhinolabs/react-hooks';
import { useRef } from 'react';
 
function ClickTracker() {
  const buttonRef = useRef<HTMLButtonElement>(null);
 
  const handleClick = (event: MouseEvent) => {
    console.log('Button clicked at:', {
      x: event.clientX,
      y: event.clientY
    });
  };
 
  useEventListener('click', handleClick, buttonRef.current);
 
  return (
    <button ref={buttonRef}>
      Click me to track coordinates
    </button>
  );
}

Notes

Supports all DOM event types
Handles callback updates safely
Automatic cleanup on unmount
Works with any DOM element
Defaults to window target
Type-safe event handling
Memoizes event listener
Prevents memory leaks