ReactJS - Tasks

React-HotKeys

January 07, 2022

react hot keys



A hot key is a key or a combination of keys on a computer keyboard that, when pressed at one time, performs a task (such as starting an application) more quickly than by using a mouse or other input device. Hot keys are sometimes called shortcut keys

React-hotKeys

   
   
    import React from 'react';
    import Hotkeys from 'react-hot-keys';

    export default class HotkeysDemo extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          output: 'Hello, I am a component that listens to keydown             and keyup of a',
        }
      }
      onKeyUp(keyName, e, handle) {
        console.log("test:onKeyUp", e, handle)
        this.setState({
          output: `onKeyUp ${keyName}`,
        });
      }
      onKeyDown(keyName, e, handle) {
        console.log("test:onKeyDown", keyName, e, handle)
        this.setState({
          output: `onKeyDown ${keyName}`,
        });
      }
      render() {
        return (
          <Hotkeys
            keyName="shift+a,alt+s"
            onKeyDown={this.onKeyDown.bind(this)}
            onKeyUp={this.onKeyUp.bind(this)}
          >
            <div style={{ padding: "50px" }}>
              {this.state.output}
            </div>
          </Hotkeys>
        )
      }
    }