useEvent()
<img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/event?style=for-the-badge&labelColor=24292e"><img alt="Types" src="https://img.shields.io/npm/types/@react-hook/event?style=for-the-badge&labelColor=24292e"><img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e"><img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/event?style=for-the-badge&labelColor=24292e"><img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/event?style=for-the-badge&labelColor=24292e">
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
// Logs an event each time the
// Logs an event each time element#foo` is clicked const useLogElementClick = () => { useEvent(document.getElementById('foo'), 'click', (event) =>
| Argument | Type | Required? | Description | | -------- | ---------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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)
```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. |