useEvent()

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

`jsx harmony 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

}

// 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)

```ts
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

Package detail

@react-hook/event

readme

useEvent()

Quick Start

LICENSE