---
layout: "../layouts/BlogPost.astro"
title: "Adding Keyboard Shortcuts to your React Apps"
slug: keyboard-shortcuts-react
description: "Using the Mousetrap library, you can add keyboard shortcuts to your React apps."
added: "Aug 03 2015"
tags: [technical]
---

I love working with [React](http://facebook.github.io/react/). And I love cool
keyboard shortcuts. Luckily, the [Mousetrap](https://craig.is/killing/mice)
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:

```sh
> 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`.

```js
    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! :)