Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haldarmahesh/use-key-hook
React hook to handle all the key press.
https://github.com/haldarmahesh/use-key-hook
hooks javascript react react-hook react-hooks reactjs
Last synced: 2 months ago
JSON representation
React hook to handle all the key press.
- Host: GitHub
- URL: https://github.com/haldarmahesh/use-key-hook
- Owner: haldarmahesh
- License: mit
- Created: 2018-10-30T12:22:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T07:05:29.000Z (over 1 year ago)
- Last Synced: 2024-02-01T02:39:28.185Z (5 months ago)
- Topics: hooks, javascript, react, react-hook, react-hooks, reactjs
- Language: JavaScript
- Size: 1000 KB
- Stars: 28
- Watchers: 6
- Forks: 6
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-react-hooks - use-key-hook - React hook to handle all the key press. (Packages)
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 definition 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).