Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/konnorrogers/hotkey-listener
A modest js library that dispatches low-level keyboard events in the form of CustomEvents.
https://github.com/konnorrogers/hotkey-listener
hotkeys javascript keyboard-events keyboard-listener keyboard-listeners
Last synced: 15 days ago
JSON representation
A modest js library that dispatches low-level keyboard events in the form of CustomEvents.
- Host: GitHub
- URL: https://github.com/konnorrogers/hotkey-listener
- Owner: KonnorRogers
- License: mit
- Created: 2020-08-13T11:46:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-23T15:45:53.000Z (about 3 years ago)
- Last Synced: 2024-10-24T05:49:27.092Z (3 months ago)
- Topics: hotkeys, javascript, keyboard-events, keyboard-listener, keyboard-listeners
- Language: JavaScript
- Homepage: https://github.com/ParamagicDev/hotkey-listener
- Size: 389 KB
- Stars: 16
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# hotkey-listener
A modest js library that dispatches low-level keyboard events in the form of CustomEvents.
## Foreword
Hotkey listener is 5.99kb according to Unpkg.
[https://unpkg.com/browse/hotkey-listener/](https://unpkg.com/browse/[email protected]/dist-web/)
Hotkey Listener is 2.6kb GZipped according to Bundlephobia.
[https://bundlephobia.com/[email protected]](https://bundlephobia.com/[email protected])
Hotkey Listener can only be registered on `HTMLElement`'s that implement
the "KeyboardEvent" interface.
For example: `window`, `document`
## Installation
```bash
npm install hotkey-listener
## OR
yarn add hotkey-listener
```
## Usage
```javascript
// index.js
import hotkeyListener from "hotkey-listener"
hotkeyListener.register({
element: window,
keys: [
"f5",
"ctrl+d"
],
eventOptions: {
// Required to preventDefault() in chrome
cancelable: true
}
})
window.addEventListener("keydown:f5", (event) => {
// Prevent window refresh
event.preventDefault()
console.log("f5 pushed")
console.log(event.cancelable)
})
window.addEventListener("keydown:ctrl+d", (event) => {
event.preventDefault()
console.log(`${event.detail.key} pushed`) // ctrl+d pressed
})
```
Hotkey listener creates custom `keyup:` and `keydown:` events.
Events also record the key that was pressed via `event.detail.key`
## API Reference
```javascript
hotkeyListener.register({
element: , // Default is window
keys: ,
// https://github.com/jaywcjlove/hotkeys#option
// element, keyup, and keydown are already predefined
hotkeyOptions: {
scope: ,
splitKey
},
// https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
eventOptions: {
bubbles: , // default false
cancelable: , // default false
composed: , // default false
detail: { key: "" }
// Detail is an Object you can attach other [key: value] pairs to
},
})
```
## Hotkeys API
Should you need more finely grained tuning of `hotkeys`, you can
communicate with the `hotkeys` API directly. For example, to enable
hotkeys on `input`, `textarea`, etc, you can do the following:
```bash
import hotkeyListener from "hotkey-listener"
hotkeyListener.hotkeys.filter = function(event) {
return true
}
```
## Usage with Stimulus
```js
// application.js
import hotkeyListener from "hotkey-listener"
hotkeyListener.register({
element: window,
keys: [
"f5",
"ctrl+d"
],
eventOptions: {
// Required to preventDefault() in chrome
cancelable: true
}
})
```
Then in your HTML for a stimulus controller you can do this:
```html
```
[https://github.com/jaywcjlove/hotkeys#filter](https://github.com/jaywcjlove/hotkeys#filter)
## How it works?
Hotkey-Listener under the hood uses [the `hotkeys` library](https://github.com/jaywcjlove/hotkeys) to dispatch [CustomEvents](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to the client.
## Contributors