react-shortcut-hoc
v0.3.1
Published
Add document keyboard shortcuts to react-component
Downloads
13
Readme
react-shortcut-hoc
Enhance a React component with a Higher Order Component that provides global keyboard event combination detection. Example: Ctrl+Enter or Ctrl+Shift+Enter
Installation
The package can be installed via NPM repository:
npm install react-click-outside
Usage
Import package with ES6 importing function, and decorate your component with it.
Decorator Function
import shortcutDecorator from 'react-shortcut-hoc
shortcutDecorator(wrapped-component, shortcut-pattern, callback-function-name)
- wrapped-component: your component that need to be decorated with shortcut detection
- shortcut-pattern: shortcut patterns in string, separated by whitespaces. Example: "ctrl+1 ctrl+shift+1+2"
- callback-function-name: function that will be called when a shortcut pattern match. Default function is: "onShortCutPressed"
Example
import shortcut from 'react-shortcut-hoc'
class WrappedComponent extends React.Component {
/**
* This method will be called everytime users hit the combination (ctrl+enter or ctrl+shift+enter)
*/
onCallback(event) {
console.log(event)
}
render() {
return <div>This is a test component</div>
}
}
export default shortcut(WrappedComponent, 'ctrl+enter ctrl+shift+enter', 'onCallback');
Supporting Keyboards
You can combine three functional keys: ctrl, alt and shift with below list of character to make a shortcut pattern. Then join all shortcut patterns in a string and seperated them by whitespace
Key
0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z ` - = [ ] \ ; ' , . /
Example:
"ctrl+shift+k+i ctrl+alt+o"
License
Released under the MIT license.