DEV Community

Sam Atkinson
Sam Atkinson

Posted on


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 {
                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:

    ignoreTags: []


Top comments (7)

selbekk profile image

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 (...);
dmitryyudakov profile image
Dmitry Yudakov
chetanam profile image

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"
Enter fullscreen mode Exit fullscreen mode
seanmclem profile image

Did it work?

wanzulfikri profile image

This is great. Never knew there is a package for shortcuts in React.

darksmile92 profile image
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!

dhruvindev profile image

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

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.