<commit_before>---
layout: post
title: "Adding Keyboard Shortcuts to your React Apps"
date: 2015-08-03 02:22:00
summary: Using the Mousetrap library, you can add keyboard shortcuts to your React apps.  Which is pretty sick.
categories: react javascript 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:

    > 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! :)<commit_msg>Fix post format<commit_after>---
layout: post
title: "Adding Keyboard Shortcuts to your React Apps"
date: 2015-08-03 02:22:00
summary: Using the Mousetrap library, you can add keyboard shortcuts to your React apps.  Which is pretty sick.
categories: react javascript 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:

    > 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! :)
{'fraction_non_alphanumeric': 0.09038828771483132, 'fraction_numerical': 0.008911521323997454, 'mean_word_length': 3.827956989247312, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6610303', 'n_tokens_mistral': 1011, 'n_tokens_neox': 935, 'n_words': 442}