react-key-listener

React component for handling keyboard events, without interfering with editable fields and buttons. Use this instead of calling addEventListener or adding onKeyDown to elements manually.

Usage

npm install --save react-key-listener

Example:

class MyComponent extends React.Component {
  handleAKey = () => {
    // do something
  };
 
  render() {
    return (
      <div tabIndex={0 /* allow this div to be given user focus */}>
        <KeyListener keyDownHandlers={{
          a: this.handleAKey
        }} />
      </div>
    );
  }
}

KeyListener ignores key events when the event originated from an <input>, <textarea>, or contenteditable element. This prevents your key event handlers from triggering when the user expected to be typing in a text field.

The event listener is added to the KeyEvent component's parent element.

Props

Name	Type	Description
keyDownHandlers	{ [key: string]: (event: KeyboardEvent) => void }	event handlers for keydown events. if event.key appears as a property on this object, the corresponding handler will be called
keyPressHandlers	{ [key: string]: (event: KeyboardEvent) => void }
keyUpHandlers	{ [key: string]: (event: KeyboardEvent) => void }
global	true | false	if true, listen to events on document; if false, listen on the KeyListener's parent element