React Shortcuts

React Keyboard shortcuts using React's synthetic events.

Getting Started

Install react-shortcut-manager

npm i react-shortcut-manager
OR
yarn add react-shortcut-manager

Define shortcuts

Keymap definition

{
  "Namespace": {
    "Action": "Shortcut",
    "Action_2": ["Shortcut", "Shortcut"],
    "Action_3": {
      "osx": "Shortcut",
      "windows": ["Shortcut", "Shortcut"],
      "linux": "Shortcut",
      "other": "Shortcut"
    }
  }
}

• Namespace should ideally be the component’s displayName.
• Action describes what will be happening. For example MODAL_CLOSE.
• Keyboard shortcut can be a string, array of strings or an object which specifies platform differences (Windows, OSX, Linux, other). The shortcut may be composed of single keys (a, 6,…) or combinations of a key and modifiers (command+shift+k).

Example keymap definition

export default {
  TODO_ITEM: {
    MOVE_LEFT: "left",
    MOVE_RIGHT: "right",
    MOVE_UP: ["up", "w"],
    DELETE: {
      osx: ["command+backspace", "k"],
      windows: "delete",
      linux: "delete"
    }
  }
};

Example

import { ShortcutProvider } from "react-shortcut-manager";
 
const keymap = {
  TODO_LIST: {
    CLEAR_ALL: "ctrl+del",
    SHOW_ALL: "shift+a"
  }
};
 
class App extends React.Component {
  render() {
    return (
      <ShortcutProvider shortcuts={keymap}>
        <RootComponent />
      </ShortcutProvider>
    );
  }
}

import { Shortcuts } from "react-shortcut-manager";
 
class TodoList extends React.Component{
  handleShortcuts(action,event){
    switch(action){
      case 'CLEAR_ALL':
        ...
        break;
      case 'SHOW_ALL':
        ...
        break;
      default:
    }
  }
  render(){
    return(
      <Shortcuts
       name="TODO_LIST"
       handler={this.handleShortcuts}>
        <TodoItem todo={...}/>
        ...
      </Shortcuts>
    )
  }
}

Props

ShortcutsProvider

• When withGlobals=true any other prop will be passed to the root div

Shortcuts

• Any other prop will be passed to the root div

Notes

• Take care of tabIndex and focus style of the components
• Any similarities to react-shortcuts is not accidental