# use-key-hook
> React hook to handle all the key press.
Latest version **1.5.0** (published 2019-03-23) · MIT license · 0 weekly downloads
## Install
```sh
npm install use-key-hook
pnpm add use-key-hook
yarn add use-key-hook
bun add use-key-hook
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.5.0 |
| Published | 2019-03-23 |
| First published | 2018-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 9.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | haldarmahesh |
| Keywords | react, hook, hooks, keyboard, input |
## Links
- npm: https://www.npmjs.com/package/use-key-hook
- npm.io page: https://npm.io/package/use-key-hook
## Dependencies (1)
- [invariant](https://npm.io/package/invariant.md) ^2.2.4
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.5.0 (latest) — 2019-03-23
- 1.4.0 — 2019-03-23
- 1.3.0 — 2018-12-12
- 1.2.0 — 2018-12-12
- 1.1.0 — 2018-12-06
- 1.0.6 — 2018-10-31
- 1.0.5 — 2018-10-31
- 1.0.4 — 2018-10-31
- 1.0.3 — 2018-10-30
- 1.0.2 — 2018-10-30
- 1.0.0 — 2018-10-30
## README
[](https://travis-ci.org/haldarmahesh/use-key-hook)
[](https://badge.fury.io/js/use-key-hook)
# use-key-hook
This is a React hook that detects all or some keys from keyboard.
If you want to detect few keys and execute function, you can provide a list of ASCII codes or keys in an array.
Few examples of use cases:
- Add keyboard shortcuts in your app
- Close modal on press of escape key
- If it is react music player, control volume and seek video
- Implement next or back on slide show
## Installing
```bash
npm install use-key-hook
```
```bash
yarn add use-key-hook
```
## Demo
[Demo](http://www.maheshhaldar.com/demo-use-key/)
## Usage
The following defination will only detect and execute provided callback **only** when `A`, `+` or `z` is pressed from keyboard.
```javascript
import useKey from 'use-key-hook';
function MyComponent = (props) => {
useKey((pressedKey, event) => {
console.log('Detected Key press', pressedKey);
console.log('Get event, if you want more details and preventDefault', event)
}, {
detectKeys: ['A', '+', 122]
});
};
```
## Arguments in useKey
### 1) callback _(required)_
> type: function
>
> The first argument is callback function which gets executed whenever the keys are pressed.
### 2) detectKeys _(optional)_
> type: array
> array item type: string | number
>
> The second argument is an object and should contain one key in name of **detectKeys**.
> This has to be an array.
**When array is empty or not passed** All the keys will be detected and callback will be executed.
The items in arrays can be **ASCII code** of keys or **characters itself**.
#### Example values of detectKeys array
```js
{
detectKeys: ['A', 69, 27];
}
```
The above will detect and execute callback only the following keys
- A maps with item 0 `A`
- Enter key maps with ASCII code is 69
- Escape key maps with numeric ASCII code 27.
Pressing any other key will not be detected.
```js
{
detectKeys: [1, '2'];
}
```
The above will detect when number 2 is pressed only.
Pressing 1, it will not be detected as we passed ASCII code numeric `1` and this is not number `1`.
Pressing any other key will not be detected.
### 3) keyevent _(optional)_
> type: string
>
> default: `keydown`
>
> Defines the type of event this hook should capture.
This parameter is passed in the config object along with `detectKeys`.
There are 3 type of events options [`keydown`, `keyup`, `keypress`].
Example config object:
```js
{
detectKeys: [1, '2'],
keyevent: 'keyup'
}
```
## Contributing
If you have any new suggestions, new features, bug fixes, etc. please contribute by raising pull request on the [repository](https://github.com/haldarmahesh/use-key-hook).
If you have any issue with the `use-key-hook`, open an issue on [Github](https://github.com/haldarmahesh/use-key-hook).
---
_Source: https://npm.io/package/use-key-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._