ruk

react-use-keypress

πŸ‘‡ React hook which listens for pressed keys.

Showing:

Popularity

Downloads/wk

1.3K

GitHub Stars

9

Maintenance

Last Commit

3mos ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

0.6KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

react-use-keypress

React hook which listens for pressed keys.

Usage

useKeypress(keys, handler);

Parameters

  • keys a single or array of key value(s) to listen to.
  • handler function to be called when one of the matching key values has been pressed.

Example

Listening to a single key:

import useKeypress from 'react-use-keypress';

const Example = (props) => {
  // ...
  useKeypress('Escape', () => {
    // Do something when the user has pressed the Escape key
  });
  // ...
};

Listening to multiple keys:

import useKeypress from 'react-use-keypress';

const Example = (props) => {
  // ...
  useKeypress(['ArrowLeft', 'ArrowRight'], (event) => {
    if (event.key === 'ArrowLeft') {
      moveLeft();
    } else {
      moveRight();
    }
  });
  // ...
};

Browser Support

Includes a shim for the KeyboardEvent.key property to handle inconsistencies from Internet Explorer and older versions of Edge and Firefox.

Requirements

Requires a minimum of React version 16.8.0 for the Hooks API.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100