react-mousetrap-mixin

React component and mixin for mousetrap.

Demo

View Demo

Installation

npm install --save react-mousetrap-mixin

Component API

Mousetrap

Props

propTypes: {
  mousetrap: React.PropTypes.object
}

• mousetrap:

  mousetrap bindings keys: callback pairs

  or shapes in

  keys: {
    callback: function(){},
    action: function()
  }

Example:

let mousetrap = {
  'up up down down left right left right b a'() {
    alert('Konami');
  },
  'up x down b l y r a'(){
    alert('カカロットォ');
  },
  'esc':{
    callback() {console.log('esc');},
    action: 'keyup'
  }
}

Keys, callbacks and actions are passed to Mousetrap.bind.

See also https://craig.is/killing/mice for detail.

Usage example

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'() {
        alert('Konami');
      },
      'up x down b l y r a'(){
        alert('カカロットォ');
      },
      'esc': {
        callback() {console.log('esc');},
        action: 'keyup'
      }
    }
    return (
      <div>
        <Mousetrap mousetrap={mousetrap} />
      </div>
    );
  }
};

See also example

Mixin API

It is also exported as Mixin.

MousetrapMixin

• getMousetrap:

  Will be called on componentDidMount.

  must return mousetrap key-callback object like prop.

• addMousetrap(key, callback, action):

  Add new mousetrap binding.

• removeMousetrap(key, action):

  Remove existing mousetrap binding.

Usage example

import React from 'react';
import {MousetrapMixin}  from 'react-mousetrap-mixin';

let MyMousetrap = React.createClass({
  mixins: [MousetrapMixin],

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

  onChange(event){
    this.setState({
      greenChecked: event.target.checked
    }, () => {
      if (this.state.greenChecked){
        this.addMousetrap('g r e e n', () => {
          this.setState({
            color: 'green'
          });
        });
      } else {
        this.removeMousetrap('g r e e n');
      }
    });
  },

  render() {
    let style = {
      backgroundColor: this.state.color
    }
    return (
      <div>
        <div style={style}>
          Type 'yellow' or 'blue'
        </div>
        <input type='checkbox' onChange={this.onChange} checked={this.state.greenChecked} />
        Enable 'green'
      </div>
    );
  }
});

See also example

npm install
npm run start:example

Tests

npm test