https://github.com/dafrok/react-shortcut-key
Shortcut key wrapper for react components.
https://github.com/dafrok/react-shortcut-key
Last synced: 3 months ago
JSON representation
Shortcut key wrapper for react components.
- Host: GitHub
- URL: https://github.com/dafrok/react-shortcut-key
- Owner: Dafrok
- License: mit
- Created: 2016-09-05T03:16:51.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-12-19T08:49:05.000Z (over 8 years ago)
- Last Synced: 2025-12-26T21:59:05.028Z (7 months ago)
- Language: JavaScript
- Homepage: https://dafrok.github.io/react-shortcut-key/
- Size: 293 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-shortcut-key
Shortcut key wrapper for react components.
## Demo
https://dafrok.github.io/react-shortcut-key/
## Installation
```
npm install react-shortcut-key
```
## Usage
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import hotkey from 'react-shortcut-key'
// Define callback functions of shortcut key
const componentOnHello = e => alert('Hello! You pressed CTRL + Enter!')
const componentOnBye = e => alert('Bye. You pressed META + Esc.')
// Define shortcut key map.
const keymap = {
'ctrl+enter': componentOnHello,
'meta+esc': componentOnBye
}
// Any component which will use shortcut keys
class Component extends React.Component {
render () {
return
Press "CTRL + Enter" or "META + Esc" to alert messages.
}
}
// Inject the shortcut keys into the component
const ComponentWithHotkey = hotkey(keymap)(Component)
// render DOM
const rootNode = document.createElement('div')
document.body.appendChild(rootNode)
ReactDOM.render(, rootNode)
```
## License
[MIT License](https://github.com/Dafrok/react-shortcut-key/blob/master/LICENSE)