react-key-listener v1.0.0

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