https://github.com/seanmcp/onkey-event-manager
🗝 Easily map onKey functions to keyboard events
https://github.com/seanmcp/onkey-event-manager
keyboard-events keydown onkey onkeydown
Last synced: about 1 year ago
JSON representation
🗝 Easily map onKey functions to keyboard events
- Host: GitHub
- URL: https://github.com/seanmcp/onkey-event-manager
- Owner: SeanMcP
- License: mit
- Created: 2019-01-18T11:39:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T16:04:44.000Z (over 3 years ago)
- Last Synced: 2025-05-08T23:42:45.036Z (about 1 year ago)
- Topics: keyboard-events, keydown, onkey, onkeydown
- Language: JavaScript
- Homepage: https://npmjs.com/package/onkey-event-manager
- Size: 1.01 MB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# onkey-event-manager
[](https://npmjs.com/package/onkey-event-manager) [](https://npmjs.com/package/onkey-event-manager) [](https://npmjs.com/package/onkey-event-manager) [](http://makeapullrequest.com)
🗝 Easily map onKey functions to keyboard events
## Basics
`onkey-event-manager` simplifies the process of listening for and acting on key changes.
```jsx
import onKey from 'onkey-event-manager'
const OpenButton = ({ open }) => (
Open
)
```
## Install
Add `onkey-event-manager` to your project:
```sh
npm i onkey-event-manager
# or
yarn add onkey-event-manager
```
## Use
Import the default `onKey` function from `onkey-event-manager` and add it to your code:
```jsx
...
import onKey from 'onkey-event-manager'
function Button({ onClick }) {
return (
onClick will fire when I am clicked
or when I'm focused and you press the down arrow.
)
}
```
## Why?
JavaScript provides three keyboard events to trigger actions: `keydown`, `keyup`, and `keypress`. In order to listen to specific keys, you need to pass a function that takes an event and compares the `event.key` to the desired key like so:
### Traditional React example
```jsx
function Accordion(props) {
const [isOpen, setIsOpen] = React.useState(false)
function open() {
setIsOpen(true)
}
function openOnArrowDown(event) {
if (event.key === 'ArrowDown') {
open()
}
}
return (
{props.title}
▾
{isOpen && {props.children}}
)
}
```
This is fine but becomes cumbersome when trying to make complex user interfaces accessible with multiple keyboard interactions.
`onkey-event-manager` abstracts the event key filtering logic, simplifying the process of listening for keys.
## API
Version 1+ of `onkey-event-manager` comprises a single default export: `onKey`.
### `onKey()`
`onKey` is a simple function that listens for an event, compares it to a set of selected keys, then calls the action and passes the `event` object if there is a match.
```js
onKey(Object)
```
If there is a single key you want to listen for, pass an object inline:
```jsx
```
For more complex listening, consider calling the function outside of the return to keep your JSX clean:
```jsx
function SelectOption(props) {
const handleKeyDown = onKey({
ArrowUp: props.decrementIndex,
ArrowDown: props.incrementIndex
})
return
}
```
## Author
[Sean McPherson](https://seanmcp.com)
## License
[MIT](/LICENSE)