@kovarjan/react-shortcut-manager NPM

React Shortcuts - with React 18 support

React Keyboard shortcuts using React's synthetic events.

Getting Started

Install react-shortcut-manager

npm i @kovarjan/react-shortcut-manager

https://www.npmjs.com/package/@kovarjan/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 parameters`action:String` : The action being fired`event:KeyboardEvent`:The keyboard event invoked the action
global	false	Whether the current shortcuts are global or not
headless	false	Applicable only when `global=true`Whether 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