Adding keyboard shortcuts in React

Keyboard shortcuts are a great feature for your React app. They help power users to get the most from your application, and can greatly reduce the time spent navigating menus and suchlike. I am currently building a web based markdown editor (because the world definitely need another one of those). I'm aiming for complete minimalism so that when writing it's just the raw text, with a preview pane which shows up when you use a keyboard shortcut.

A quick Google threw up react-hotkeys which seemed great for the task. It's super simple to configure and set up.

const keyMap = {
    PREVIEW: "ctrl+shift+p",
};
class App extends Component {

    handlers = {
        PREVIEW: event => this.setState((state) => {
            return {
                ...state,
                preview: !state.preview
            }
        })

    };
...
<div className="App">
                <GlobalHotKeys keyMap={keyMap} handlers={this.handlers}/>
... the rest of your code here....

The keymap is a list of the actions you want to make available (you can make up any name you want for your commands) mapped to the keyboard shortcut you want for it. handlers_ is an object, mapping the command names to an event handler function. In the sample I update the preview field in my state, which is used to toggle a className in my app to either display or hide the preview div.

After dropping this code into my app the shortcut worked first time, except for when my cursor was in a text area. Given that my app is almost 100% textarea this was a problem! I discovered that react-hotkeys disables shortcuts from firing from inside textareas and other inputs by default, which makes
total sense. The standard when building webapps is for shortcuts to be single letters (eg. 'c' will compose a new email in gmail), and if you're typing a message out you don't want it to fire your shortcuts.

react-hotkeys has a configure method which allows you to modify the defaults. Placing this configuration in my component makes hotkeys work irrelevant of focus:

configure({
    ignoreTags: []
})

Simple!

Comments

[selbekk]

Cool idea! Would love to use this with hooks too, like

function MyComponent(props) {
  const handleHotkey = React.useCallback(event => { ... }, []);
  useGlobalHotkey("ctrl+shift+p", handleHotkey);
  return (...);
}

[Dmitry Yudakov]

You can: github.com/JohannesKlauss/react-ho...

[Chetan]

Say I need to handle ctrl +c event in both windows and mac couse you give me an example of keymap Isuppose it would look like so

 const keyMap: Keymap = {
    copy: ["ctrl+c",'command+c'],
    paste: "ctrl+p"
  };

[Seanmclem]

Did it work?

[Robin Kretzschmar]

Great way to include keyboard shortcuts!
I was searching for a library like this but didn't find the time to try one yet.

This looks like a library to definitely look into!

[Dhruvin]

react hotkeys is no longer maintained, do you have any other library reccomendations ?