https://github.com/hiroppy/keybinding-decorator

Decorator for keybinding
https://github.com/hiroppy/keybinding-decorator

decorators keybindings

Last synced: about 2 months ago
JSON representation

Decorator for keybinding

• Host: GitHub
• URL: https://github.com/hiroppy/keybinding-decorator
• Owner: hiroppy
• License: mit
• Created: 2017-08-16T08:51:32.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-08-17T03:23:15.000Z (almost 6 years ago)
• Last Synced: 2025-03-21T01:27:58.569Z (about 1 year ago)
• Topics: decorators, keybindings
• Language: TypeScript
• Homepage:
• Size: 204 KB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  
keybinding-decorator





  Decorator for Keybinding



[![Build Status](https://travis-ci.org/abouthiroppy/keybinding-decorator.svg?branch=master)](https://travis-ci.org/abouthiroppy/keybinding-decorator)

[![npm version](https://badge.fury.io/js/keybinding-decorator.svg)](https://badge.fury.io/js/keybinding-decorator)

keybinding-decorator is using [Mousetrap](https://github.com/ccampbell/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

```javascript

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 
current: {this.state.current}
;

  }

}


const root = () => ;

ReactDOM.render(root(), document.getElementById('root'));

```

## Method

### unbind()

A method binded by `decorator` has `unbind` method.  

Release this function from Mousetrap.