Skip to content
Decorator for keybinding
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
sample
src
.editorconfig
.gitignore
.prettierrc.yml
.travis.yml
LICENSE
README.md
package-lock.json
package.json
tsconfig.json

README.md

keybinding-decorator

Decorator for Keybinding

Build Status npm version

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.

You can’t perform that action at this time.