react-use-keypress

React hook that listens for specific key presses.

Usage

useKeypress(keys, handler);

Parameters

• keys – a single key or array of key values to listen for.
• handler – function called when a matching key is pressed.

Examples

Single key:

import useKeypress from "react-use-keypress";

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

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 in older browsers.

Requirements

Requires React 16.8.0 or higher (Hooks API).