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

| Props | Default Value | Description | | ----------- | ------------- | -------------------------------------------- | | shortcuts | Required | An object containing keymaps for events | | withGlobals | false | Enable global shortcuts | | tabIndex | 0 | tabIndex of root div when withGlobals=true |

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

Shortcuts

| Props | Default Value | Description | | --------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | Required | name of the keygroup | | handler | Required | The function to handle keyboard events.Receieves 2 parametersaction:String : The action being firedevent:KeyboardEvent:The keyboard event invoked the action | | global | false | Whether the current shortcuts are global or not | | headless | false | Applicable only when global=trueWhether to render a container div or not. | | tabIndex | 0 | tabIndex of the element | | stopPropagation | false | Whether to stopPropagation for all of the current actions*Can be done in handler function also | | preventDefault | false | Whether to preventDefault for all of the current actions*Can be done in handler function also | | alwaysFire | false | Whether to fire these actiona when an input like element is in focus |

• 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