Comparing keyboard shortcut libraries in React — Mousetrap vs Hotkeys

Photo by Sam Albury on Unsplash

You often run into cases where keyboard shortcuts are required for a web app. For the simplest use cases, using vanilla-js will work just fine. However, there are times where combination shortcuts (example: ctrl+d) or sequence shortcuts (example g , then i pressed sequentially) make using vanilla-js not-so-easy. In this post, I’ll compare two of the most popular keyboard shortcuts library — Mousetrap and Hotkeys. Please note that Mousetrap does have React-binding libraries, but I will use the original library since the others are non-official libraries.

Contender 1: Using mousetrap

Mousetrap is a library for handling keyboard shortcuts (single keys, combinations, and sequences).

Install the mousetrap package.

npm i mousetrap --save

or in yarn,

yarn add mousetrap

To create a shortcut, bind it with Mousetrap.

const Mousetrap = require("mousetrap");
Mousetrap.bind("ctrl+d", yourEventHandler); // Usually inside componentDidMount()

Don’t forget to unbind the listener.

Mousetrap.unbind("ctrl+d"); // Usually inside componentWillUnmount()

Using Mousetrap

Two minor downsides with this approach.

• Preventing auto-repeat when key is held down takes an extra step. This may not be an issue for most cases, but there are cases where you only want to fire the event once even if a user holds down onto the key. Try pressing on d key to see the auto-repeat in action in the code editor above.

Repeated when you hold down the key

• You have to unbind the event handlers in componentWillUnmount(). If you forget to unbind it and the component is unmounted, the JS engine will throw an error when a user presses the shortcut key since the event handler doesn’t exist in memory anymore.

Note that these are very minor. In most cases, you won’t even notice these. With ~10k Github stars, Mousetrap is very solid and battle-tested.

Creating sequence shortcuts is also easy.

Mousetrap.bind("g i", openInbox);

Contender 2: Using react-hotkeys

Hotkeys is another popular library for capturing keyboard input. We’re going to use react-hotkeys — the React version of Hotkeys library.

Install the react-hot-key package.

npm i react-hot-keys --save

or in Yarn,

yarn add react-hot-keys

Wrap the jsx portion where you want to add shortcuts to.

<Hotkeys keyName="d,ctrl+d,esc" onKeyDown={this.onKeyDown.bind(this)}>
  <YourComponentHere />
</Hotkeys>

Using react-hot-keys

What’s great about react-hot-keys is that it handles the two downsides I’ve mentioned in Mousetrap out-of-the-box.

• Auto-repeat events when holding down a key is disabled by default. You can enable it by using allowRepeat prop.
• We don’t manually have to unbind each listeners.

However, one downside is that the library’s support of sequence of keys is not implemented yet (or is undocumented). The original library (hotkeys ) seems to support it, although buggy according to the issue thread below.

Whether support Sequence of keys? · Issue #26 · jaywcjlove/hotkeys

Another thing to note is that react-hot-keys only supports keydown and keyup events, compared to keydown, keyup , keypress events in mousetrap .

Conclusion: I prefer Mousetrap, but you will like both libraries

react-hot-keys’ ability to handle auto-repeat events out-of-the-box is great, not to mention the slightly cleaner code thanks to not having to unbind each listeners in componentWillUnmount.

However, unbinding manually in componentWillUnmount doesn’t bother me too much. I actually prefer binding shortcuts in componentDidMount since it is easier to figure out what shortcuts are attached to the component I’m looking at (as opposed to going down all the way to render method).

Maybe I’m just too used to it. But if Mousetrap gets the job done, I’ll keep on using it.