Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including keybinding-decorator with all npm packages installed. Try it out:

var keybindingDecorator = require("keybinding-decorator")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

keybinding-decorator v0.1.1

Decorator for keybinding

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.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free