KeyBind is a library written in Typescripts, that aim to provide an easy way to bind keyboard keys and create amazing and interactive web applications.
- 😷 Type safety with Typescript
- 📋 IDE integration with Typedoc
- ✨ Framework agnostic
Install the package with your favourite package manager. For example:
npm i keybind
Start using Keybind is pretty simple:
import { initKeybind, addKey } from "keybind";
// Init KeyBind library in document.body
initKeybind(document.body);
// Then we can add all the biding we want
addKey(
"S",
{
keyupCallback: () => {
console.log("Hello from keyup S");
},
keydownCallback: () => {
console.log("Hello from keydown S");
},
},
{ preventRepeatOnKeyDown: true }
);
For a live demo take a look to the demo folder
Add a new key to the binding list. Let you specify which key should be binded, keyup and keydown callback, and eventually some options.
Name | Type | Mandatory | Default |
---|---|---|---|
stringKey | string | true | - |
callbacks | KeyBindingCallbacks | true | - |
options | KeyBindingOptions | false | { preventRepeatOnKeyDown: false } |
void
import { addKey } from "keybind";
// Init KeyBind and do some stuff ...
// Then we can add all the biding we want
addKey(
"S",
{
keyupCallback: () => {
console.log("Hello from keyup S");
},
keydownCallback: () => {
console.log("Hello from keydown S");
},
},
{ preventRepeatOnKeyDown: true }
);
Remove all the bindend keys from the list.
No parameters required.
void
import { clearKeys } from "keybind";
// Init KeyBind and do some stuff ...
// Then we can add all the biding we want
clearKeys();
Init keybind library in a given target.
Name | Type | Mandatory | Default |
---|---|---|---|
target | HTMLElement | true | - |
void
import { initKeybind } from "keybind";
initKeybind(document.body);
Returns whether the binding is enabled or not.
No parameters required
boolean
- whether the binding is enabled
import { isBindingEnabled } from "keybind";
// Init KeyBind and do some stuff ...
// Then we can add all the biding we want
if (isBindingEnabled()) {
console.log("Bindining enabled");
} else {
console.log("Bindining disabled");
}
Returns whether a given key is binded or not.
Name | Type | Mandatory | Default |
---|---|---|---|
stringKey | string | true | - |
boolean
- returns whether the given key is binded
import { isKeyBinded } from "keybind";
// Init KeyBind and do some stuff ...
if (isKeyBinded("S")) {
console.log("S is binded");
} else {
console.log("S isn't binded");
}
Remove the given key (if binded) from the binding list.
Name | Type | Mandatory | Default |
---|---|---|---|
stringKey | string | true | - |
void
import { removeKey } from "keybind";
// Init KeyBind and do some stuff ...
// Then we can add remove the biding we want
removeKey("S");
Allows to enable/disable binding.
Name | Type | Mandatory | Default |
---|---|---|---|
enable | boolean | true | - |
void
import { toggleBinding } from "keybind";
// Init KeyBind and do some stuff ...
// Let's turn off binding
toggleBinding(false);
// ... and then turn on again
toggleBinding(true);
Unbind Keybind library.
Name | Type | Mandatory | Default |
---|---|---|---|
target | HTMLElement | true | - |
void
import { unbindListeners } from "keybind";
// Init KeyBind and do some stuff ...
unbindListeners(document.body);
Represents the key binded by the library.
Name | Type | Mandatory |
---|---|---|
callbacks | KeyBindingCallbacks | true |
options | KeyBindingOptions | false |
Represents the callbacks binded by the library.
Name | Type | Mandatory |
---|---|---|
keyupCallback | (e?: KeyboardEvent) => void | false |
keydownCallback | (e?: KeyboardEvent) => void | true |
Represent the combo options. Available formats are:
Meta, Ctrl, Shift, Alt
Represent the available options for binding.
Name | Type | Mandatory |
---|---|---|
preventRepeatOnKeyDown | boolean | false |
enableWithCombo | KeyComboOption | false |
You can try a live demo of Keybind here: https://csjgt3.csb.app/
The full code of the demo is available here: https://github.com/longo-andrea/keybind/tree/main/demo
MIT License © 2022 Andrea Longo