keybinding-decorator

Decorator for Keybinding

keybinding-decorator is using Mousetrap.

Decorators offer a convenient declarative syntax to modify the shape of class declarations.
see: https://tc39.github.io/proposal-decorators/

You must use babel-plugin-transform-decorators-legacy.

Install

$ npm install keybinding-decorator --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import keybind from 'keybinding-decorator';
 
class Main extends React.Component {
  constructor() {
    super();
 
    this.state = { current: '' };
 
    // init
    Reflect.apply(this.csk, this, []);
    Reflect.apply(this.esc, this, []);
  }
 
  @keybind('command+shift+k')
  csk() {
    this.setState({ current: 'command+shift+k' });
  }
 
  @keybind('esc')
  esc() {
    this.setState({ current: 'esc' });
  }
 
  componentWillUnmount() {
    this.esc.unbind();
    this.csk.unbind();
  }
 
  render() {
    return <div>current: {this.state.current}</div>;
  }
}
 
const root = () => <Main />;
 
ReactDOM.render(root(), document.getElementById('root'));

Method

unbind()

A method binded by decorator has unbind method.
Release this function from Mousetrap.