https://github.com/dashed/react-combokeys
Bind to keyboard shortcuts in React.
https://github.com/dashed/react-combokeys
component hotkeys keyboard react shortcuts
Last synced: 11 months ago
JSON representation
Bind to keyboard shortcuts in React.
- Host: GitHub
- URL: https://github.com/dashed/react-combokeys
- Owner: dashed
- License: mit
- Created: 2017-09-20T22:11:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-05-03T07:38:43.000Z (almost 7 years ago)
- Last Synced: 2025-02-25T17:40:25.511Z (11 months ago)
- Topics: component, hotkeys, keyboard, react, shortcuts
- Language: JavaScript
- Homepage:
- Size: 2.26 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-combokeys [](https://travis-ci.org/dashed/react-combokeys) [](https://www.npmjs.com/package/react-combokeys)
===============
[](https://greenkeeper.io/)
> Bind to [keyboard shortcuts](https://en.wikipedia.org/wiki/Keyboard_shortcut) in React.
**NOTE:** This React component library wraps [combokeys](https://github.com/avocode/combokeys) which is a fork of [mousetrap](https://github.com/ccampbell/mousetrap). `combokeys` handles the capturing of keyboard shortcuts/combos/keypresses.
## Install
```sh
$ yarn add react-combokeys
# npm v5+
$ npm install react-combokeys
# before npm v5
$ npm install --save react-combokeys
```
## Usage
```js
// 3rd-party imports
import ReactDOM from "react-dom";
import React, { Component } from "react";
import ComboKeys from "react-combokeys";
// function as child component
ReactDOM.render(
{({ combo }) => {
return
{`Combo: ${combo || "none yet"}`};
}}
,
mountNode
);
// render prop
const render = ({ combo }) => {
return
{`Combo: ${combo || "none yet"}`};
};
ReactDOM.render(
,
mountNode
);
```
## Props
### `render` (optional)
An optional function that is called whenever a keyboard shortcut/combo has been detected, or when internal state for tracking keyboard shortcut/combo has changed.
It's expected that `render` function returns a single React element.
This has same API semantics as [`React.Component.render()`](https://facebook.github.io/react/docs/react-component.html#render).
If `render` function is given, it has precedence over any given child component:
```js
// TODO: add example
```
### Function as child component (optional)
Same semantics as `render` prop function (see above).
If `render` function is not given, then the child component will be invoked as a function.
```js
// TODO: add example
```
### `onCombo` (optional)
An optional function that is called whenever a keyboard shortcut/combo has been detected.
The `onCombo` function is invoked with an object argument: `({ event, combo, action })`.
Credits
=======
Some parts of code (e.g. `getRootProps()`) were blatantly copied from: https://github.com/paypal/downshift
Kudos to [@kentcdodds](https://github.com/kentcdodds) and his article [here](http://tinyletter.com/kentcdodds/letters/how-to-give-rendering-control-to-users-with-prop-getters), for inspiring me to create this React component library using the ideas that he (and others) have preached.
License
=======
MIT.