@react-hook/event v1.2.6

A React hook for adding events to HTML elements. This hook cleans up your listeners automatically when it unmounts. You won't have to worry about wrapping your listener in a useCallback() because this hook makes sure your most recent callback is always invoked.

Quick Start

import * as React from 'react'
import useEvent from '@react-hook/event'

// Logs an event each time target.current is clicked
const Component = () => {
  const target = useRef(null)
  useEvent(target, 'click', (event) => console.log(event))
  return <div ref={target} />
}

// Logs an event each time the `document` is clicked
const useLogDocumentClick = () => {
  useEvent(document, 'click', (event) => console.log(event))
}

// Logs an event each time the `window` is clicked
const useLogWindowClick = () => {
  useEvent(window, 'click', (event) => console.log(event))
}

// Logs an event each time element#foo` is clicked
const useLogElementClick = () => {
  useEvent(document.getElementById('foo'), 'click', (event) =>
    console.log(event)
  )
}

API

useEvent(target, type, listener)

const useEvent = <
  // Also has Window, Document overloads
  T extends HTMLElement = HTMLElement,
  K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap
>(
  target: React.RefObject<T> | T | Window | Document | null,
  type: K,
  listener: EventListener<K>,
  cleanup?: (...args: any[]) => any
)

LICENSE

MIT