Reusable component and mixin for mousetrap

Component Usage componentExample Demo

import React from 'react';
import Mousetrap from 'react-mousetrap-mixin';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    let mousetrap = {
      'up up down down left right left right b a enter'() {
        alert('KONAMI');
      },
      'up x down b l y r a'(){
        alert('カカロットォ');
      },
      'esc': {
        callback() {console.log('esc');},
        action: 'keyup'
      }
    }
    return (
      <div>
        <h3>Type konami command</h3>
        <pre>
          ↑ ↑ ↓ ↓ ← → ← → b a enter
        </pre>
        <Mousetrap mousetrap={mousetrap} />
      </div>
    );
  }
};

---

Mixin Usage mixinExample Demo

import React from 'react';
import {MousetrapMixin}  from 'react-mousetrap-mixin';
let MyMousetrap = React.createClass({
  mixins: [MousetrapMixin],

  getInitialState(){
    return {
      color: 'red'
    }
  },

  getMousetrap(){
    return {
      'y e l l o w':() => {
        this.setState({
          color: 'yellow'
        });
      },
      'b l u e':() => {
        this.setState({
          color: 'blue'
        });
      }
    };
  },

  render() {
    let style = {
      backgroundColor: this.state.color
    }
    return (
      <div>
        <div style={style}>
          Type 'yellow' or 'blue'
        </div>
      </div>
    );
  }
});