theanxy / react-keymaster

React component to listen to keydown and keyup keyboard events

react-keymaster

A react component that listens to KeyDown And KeyUp event.

Uses a fork of keymaster for keydown detection of special characters.

Example

Install

yarn add react-keymaster

Code

import React from 'react';

import ReactKeymaster from 'react-keymaster';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      output: 'Hello, I am a component that listens to keydown and keyup of a',
    };
    this.onKeyDown = this.onKeyDown.bind(this);
    this.onKeyUp = this.onKeyUp.bind(this);
  }
  onKeyDown(keyName) {
    this.setState({
      output: `keydown ${keyName}`,
    });
  }
  onKeyUp(keyName) {
    this.setState({
      output: `keyup ${keyName}`,
    });
  }
  render() {
    return (<div>
      <h1>react-keymaster demo</h1>
      <ReactKeymaster
        keyName="a"
        onKeyDown={this.onKeyDown}
        onKeyUp={this.onKeyUp}
      />
      <div>
        {
          this.state.output
        }
      </div>
    </div>);
  }
}