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

npm install use-key-hook

yarn add use-key-hook

Demo

Demo

Usage

The following defination will only detect and execute provided callback only when A, + or z is pressed from keyboard.

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

{
  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.

{
  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:

{
  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.

If you have any issue with the use-key-hook, open an issue on Github.