react-combokeys
Bind to keyboard shortcuts in React.
NOTE: This React component library wraps combokeys which is a fork of mousetrap. combokeys
handles the capturing of keyboard shortcuts/combos/keypresses.
Install
$ yarn add react-combokeys# npm v5+ $ npm install react-combokeys# before npm v5 $ npm install --save react-combokeys
Usage
// 3rd-party imports ;; ; // function as child component ReactDOM; // render prop const render = { return <div>`Combo: `</div>;}; ReactDOM;
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()
.
If render
function is given, it has precedence over any given child component:
// 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.
// 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 and his article here, for inspiring me to create this React component library using the ideas that he (and others) have preached.
License
MIT.