How to use react-hotkeys - 6 common examples

To help you get started, we’ve selected a few react-hotkeys examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ShabadOS / desktop / app / frontend / src / App.js View on Github external
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,
github Wicklets / wick-editor / src / Editor / Modals / SettingsModal / KeyboardShortcuts / KeyboardShortcuts.jsx View on Github external
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,
    });


  }
github greena13 / react-hotkeys / examples / src / HOCWrappedNode.js View on Github external
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);
github s-panferov / tygen / packages / docscript-react / ignore / explorer / components / hotkeys.ts View on Github external
import * as React from 'react'

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

let hotkeys = require('react-hotkeys')
let Hotkeys: React.ReactCtor = hotkeys.HotKeys
export default Hotkeys
github WTTJ / react-jungle-select / dist / JungleSelect.js View on Github external
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' },
github greena13 / react-hotkeys / examples / src / App.js View on Github external
renderDialog() {
    if (this.state.showDialog) {
      const keyMap = getApplicationKeyMap();
      const { filter } = this.state;
      const _filter = filter.toUpperCase();

      return (
         this.setState({ showDialog: false })} }
          &gt;

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

            
              </div>

react-hotkeys

A declarative library for handling hotkeys and focus within a React application

ISC
Latest version published 5 years ago

Package Health Score

59 / 100
Full package analysis