react-mousetrap-mixin
React mixin for mousetrap
Last updated 3 years ago by georgeosddev .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-mousetrap-mixin 
SYNC missed versions from official npm registry.

react-mousetrap-mixin Build Status npm version

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

Current Tags

  • 0.1.1                                ...           latest (3 years ago)

2 Versions

  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (27)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |