How to use react-hotkeys - 6 common examples

constructor( props ) {
    super( props )

    // Configure react-hotkeys
    configure( {
      ignoreTags: [],
      ignoreKeymapAndHandlerChangesByDefault: false,
    } )

    this.state = {
      connected: false,
      status: null,
      banis: [],
      bani: null,
      lineId: null,
      mainLineId: null,
      nextLineId: null,
      viewedLines: {},
      transitionHistory: {},
      latestLines: {},
      shabad: null,

beginEdit = (actionName, index) => {
    // Begin recording that we are editing a key.
    var cancelKeyRecording =  recordKeyCombination(
      (sequence) => this.changeKey(actionName, index, sequence)
    );

    // Set that we are editing a key.
    this.setState({
      editingAction: {actionName: actionName, index: index || 0}, 
      cancelKeyRecording: cancelKeyRecording,
    });


  }

opacity: 1,
      background: COLORS[colorNumber],
    };

    // tabIndex is explicitly set here so we can use the tab key to move between nodes
    // - by default we would set it to -1 so it can only be directly clicked (& tapped?)
    //   or focused programattically
    return (
      <div style="{style}" tabindex="0">
        [Alt+C] Change Color
      </div>
    );
  }
}

export default withHotKeys(ACTION_KEY_MAP)(HOCWrappedNode);

import * as React from 'react'

export interface HotkeysProps extends React.CommonProps {
	keyMap?: any
	handlers?: { [command: string]: () => void }
}

let hotkeys = require('react-hotkeys')
let Hotkeys: React.ReactCtor = hotkeys.HotKeys
export default Hotkeys

focused = _state4.focused;

      var selected = this.selectedItems();

      var classNames = ['jungle-select'].concat(className);
      this.listOpened() && classNames.push('jungle-select-opened');
      selected.length && classNames.push('jungle-select-selected');
      filter && filter.length && classNames.push('jungle-select-filtered');
      focused && classNames.push('jungle-select-focused');
      if (classList) {
        classNames = classNames.concat(classList);
      }
      mode && classNames.push('mode-' + mode);

      return _react2.default.createElement(
        _reactHotkeys.HotKeys,
        {
          ref: function ref(e) {
            return _this7.container = e;
          },
          keyMap: keyMap,
          handlers: handlers,
          focused: true,
          className: classNames.join(' '),
          onFocus: this.onFocusFilter.bind(this)
        },
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            'div',
            { className: 'jungle-select-controls' },

renderDialog() {
    if (this.state.showDialog) {
      const keyMap = getApplicationKeyMap();
      const { filter } = this.state;
      const _filter = filter.toUpperCase();

      return (
         this.setState({ showDialog: false })} }
          >

          <div style="{styles.DIALOG}">
            <h2>
              Keyboard shortcuts
            </h2>

            
              </div>