keycuts-react is the React wrapper for keycuts, a modern Javascript library for handling keyboard shortcuts.

Installation

Install with npm or Yarn.

$ npm install keycuts keycuts-react --save
# or
$ yarn add keycuts keycuts-react

Alternatively you can download the distributed library and link it into your webpage below the keycuts library.

<script src="keycuts.min.js"></script>
<script src="keycuts-react.min.js"></script>

Usage

// Import using ES6 modules syntax
import Keycuts from 'keycuts-react'

// Include it in your component
...
render() {
  return (
    <Keycuts bind={myBindings} watch={myWatchers} />
}
...

If the Keycuts element does not have any children it listens to key events of the window object. Otherwise it will just listen to events that are bubbling up from its children.

Development

For development fetch the code from Github and install the dependencies.

$ git clone https://github.com/medihack/keycuts-react.git
$ cd keycuts-react
$ npm install # or yarn install

keycuts-react uses Webpack to transpile the source code (src/) into a minified and non-minified bundle in the dist/ folder.

$ npm run build

Run the test suite (using Jest) once or continously when a source or test file was changed.

// Run all tests once
$ npm run test
// or continously
$ npm run test:watch

More scripts to manage the library can be found in the scripts section in the (./package.json) file.

To contribute, please fork, add your code, write tests for it and submit a pull request.

License

MIT © Kai Schlamp