redux-min-shortcuts

Shortcuts for Redux

The package provides a small API for creating and dispatching redux actions triggered by keyboard shortcuts.

Installation

npm install redux-min-shortcuts

Example with react hooks

Example using hooks binding Undo/Redo to Ctrl+Z/Ctrl+Y for redux-undo package. All required is to call useGlobalShortcuts() with a list of shortcuts-to-action-creators array:

import { useGlobalShortcuts } from "redux-min-shortcuts";
import { ActionCreators } from "redux-undo";

const shortcutBindings = [
  { key: "z", modifiers: ["Control"], action: ActionCreators.undo },
  { key: "y", modifiers: ["Control"], action: ActionCreators.redo },
];

function App() {

  useGlobalShortcuts(shortcutBindings);

  return <div className="App" />;
}

export default App;

Example without react hooks and custom arguments

Calling handleShortcut() directly without registering global shortcuts is easy. This way, an argument can be passed down to the action creator:

import { useDispatch } from "react-redux";
import { handleShortcut } from "redux-min-shortcuts";

function App() {

  const shortcutBindings = [
    { key: "z", modifiers: ["Control"], action: ActionCreators.undo },
    { key: "y", modifiers: ["Control"], action: ActionCreators.redo },
  ];

  const dispatch = useDispatch();

  const handleChildKeyDown = (event, myArgument) => {
    handleShortcut(event, shortcutBindings, dispatch, myArgument);
  };

  return <div className="App" onChildKeyDown="handleChildKeyDown" />;
}

Notes

Shortcut binding

The shortcut binding consists out of a key, a collection of modifiers-keys, an function that can create an action:

{
  key: "a",
  modifiers: ["Control", "Shift"],
  action: myActionCreator,
}

An optional callback isReady can be specified to check if the shortcut binding is currently active or not. It will get called back everytime the user presses the keyboard shortcut. It get's passed the arguments event and arg that are passed into handleShortcuts(). If the binding is not ready, the event is not processed and neither stopPropagation() nor preventDefault() gets called:

{
  key: "a",
  modifiers: ["Control", "Shift"],
  isReady: (event, arg) => arg.isReady
  action: myActionCreator,
}

An optional property is passDefault which prevents preventDefault() being called even even if the keyboard shortcut was detected and will be executed. This allows a shortcut to execute custom code but at the same time be handled by the browsers default implementation:

{
  key: "a",
  modifiers: ["Control", "Shift"],
  action: myActionCreator,
  passDefault: true
}

Propagation (stopPropagation)

If a event is handled, event.stopPropagation() is always called.

Default (preventDefault)

If a event is handled, by default event.preventDefault() is called. If it should not be called, the argument passDefault: true needs to be passed to the object:

  { key: "y", modifiers: ["Control"], action: ActionCreators.redo, passDefault: true },