rsh

react-shortcut-hoc

Add document keyboard shortcuts to react-component

Showing:

Popularity

Downloads/wk

10

Maintenance

No Maintenance Data Available

Package

Dependencies

1

Size (min+gzip)

1.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100