@react-hook/event
v1.2.6TypeScript
A React hook for managing event listeners, e.g. removing events when a component unmounts.
reactreact hookuse-eventuse-eventsreact event hookreact events hookreact listener hookevent hookevents hook
0/weekUpdated 3 years agoMITUnpacked: 33.5 KB
Published by Jared Lunde
npm install @react-hook/event
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
$3
`ts`
const useEvent = <
// Also has Window, Document overloads
T extends HTMLElement = HTMLElement,
K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap
>(
target: React.RefObject
type: K,
listener: EventListener
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 |keyof EventMap
| type | | Yes | The type of event to listen for |(this: T, ev: EventMap[K]) => any
| listener | | Yes | The callback invoked when the event type fires |(...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. |
| cleanup |
LICENSE
MIT