@react-hook/event

A React hook for managing event listeners, e.g. removing events when a component unmounts.

Usage no npm install needed!

<script type="module">
  import reactHookEvent from 'https://cdn.skypack.dev/@react-hook/event';
</script>

README


useEvent()

Bundlephobia Types Build status NPM Version MIT License

npm i @react-hook/event

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
)
Argument Type Required? Description
target React.RefObject<T> | T | Window | Document | null Yes The React ref, window, or document to add the event listener to
type keyof EventMap Yes The type of event to listen for
listener (this: T, ev: EventMap[K]) => any Yes The callback invoked when the event type fires
cleanup (...args: any[]) => any No This callback will be invoked when the event unmounts. This is in addition to the automatic event listener cleanup that occurs. A common use case could be something like clearing a timeout.

LICENSE

MIT