https://github.com/accessible-ui/use-key
🅰 A React hook for handling `keydown` events on specific `event.key` values. It also normalizes non-standard `event.key` values from IE to their modern equivalents.
https://github.com/accessible-ui/use-key
Last synced: 2 months ago
JSON representation
🅰 A React hook for handling `keydown` events on specific `event.key` values. It also normalizes non-standard `event.key` values from IE to their modern equivalents.
- Host: GitHub
- URL: https://github.com/accessible-ui/use-key
- Owner: accessible-ui
- License: mit
- Created: 2020-07-07T03:27:04.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T10:49:10.000Z (over 2 years ago)
- Last Synced: 2025-02-02T04:21:30.917Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.42 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
useKey()
npm i @accessible/use-key
A React hook for handling `keydown` events on specific `event.key` values. It also
normalizes non-standard `event.key` values from IE to their modern equivalents.
## Quick Start
```jsx harmony
import * as React from 'react'
import useKey from '@accessible/use-key'
const Component = () => {
const ref = React.useRef(null)
// Listens to keydown events on the `ref` above
useKey(ref, {
// Logs event when the Escape key is pressed
Escape: console.log,
// Logs "Key was pressed: Enter" to the console when Enter is pressed
Enter: (event) => console.log('Key was pressed:', event.key),
})
// Listens to keydown events on the window
useKey(window, {
// Logs event when the Escape key is pressed
Escape: console.log,
// Logs "Key was pressed: Enter" to the console when Enter is pressed
Enter: (event) => console.log('Key was pressed:', event.key),
})
return
}
```
## API
### useKey(target, handlers)
#### Arguments
| Argument | Type | Required? | Description |
| -------- | ---------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------ |
| target | React.RefObject<T> | T | Window | Document | null | Yes | A React ref, element, `window`, or `document` to add the key listener to |
| handlers | `Record any>` | Yes | A mapping with keys matching the `event.key` string you want to listen on. The value for each key should be an event listener. |
#### Returns `void`
## LICENSE
MIT