Adding Keyboard Shortcuts to your React Apps

I love working with React. And I love cool keyboard shortcuts. Luckily, the Mousetrap keyboard shortcut library works really well with React. Hot.

So, first you obvi have to install the two. Just use handy npm to do that, and call:

> npm install react
> npm install mousetrap

Dang. That was so easy. This is crazy.

Now that you’ve done that, go ahead and build your React app as usual. Now, let’s say that you have a super awesome component (called <SuperAwesomeComponent>), and you want to call a function letFishFly in that component’s class whenever someone hits “* k”, “ctrl+r”, or the Konami Code. Because you feel like it.

It’s so easy to add now! In your component, you just have to bind the Mousetrap command to letFishFly in the componentWillMount function, and unbind it in componentWillUnmount.

componentDidMount() {
  Mousetrap.bind(['* k', 'ctrl+r', `up up down down left right left right b a enter`], letFishFly);
}
componentWillUnmount() {
  Mousetrap.unbind(['* k', 'ctrl+r', `up up down down left right left right b a enter`], letFishFly);
}

Oh my word. That’s it. You have keyboard commands set up in React. Congratulations.

Until next time! :)