# react-mousetrap-mixin [![Build Status](https://travis-ci.org/georgeOsdDev/react-mousetrap-mixin.svg?branch=develop)](https://travis-ci.org/georgeOsdDev/react-mousetrap-mixin) [![npm version](https://badge.fury.io/js/react-mousetrap-mixin.svg)](http://badge.fury.io/js/react-mousetrap-mixin)

React component and mixin for [mousetrap](https://github.com/ccampbell/mousetrap).

## Demo

[View Demo](http://georgeosddev.github.io/react-mousetrap-mixin/example/)

## Installation

```bash
npm install --save react-mousetrap-mixin
```

## Component API

### `Mousetrap`

#### Props

```javascript
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

```javascript

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](https://github.com/georgeOsdDev/react-mousetrap-mixin/tree/develop/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

```javascript

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](https://github.com/georgeOsdDev/react-mousetrap-mixin/tree/develop/example/MyMousetrap.js)

```bash
npm install
npm run start:example
```

## Tests

```bash
npm test
```