keybinding-decorator

Decorator for keybinding

Usage no npm install needed!

<script type="module">
  import keybindingDecorator from 'https://cdn.skypack.dev/keybinding-decorator';
</script>

README

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.