react-shortcut-hoc

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.