Assign Shortcuts To Any Actions – CtrlTab.js

Preview:

Description:

CtrlTab.js is a modern key binding JavaScript library for listening to keyboard events and triggering any actions on keypress.

How to use it:

1. Install and import the CtrlTab.js an ES module.

# Yarn
$ yarn add @dwtechs/ctrltab
# NPM
$ npm i @dwtechs/ctrltab

import { Keyboard } from "@dwtechs/ctrltab";

2. Or include the ctrltab.iife.min.js in the document.

<script src="./dist/ctrltab.iife.min.js"></script>

3. Initialize the library.

// ES
let keyboard = new Keyboard();
// Browser
var keyboard = new CtrlTab.Keyboard();

4. Bind shortcuts to an action using the addCmd method.

// addCmd(name, ctrlKeys, keys, callback, options)
keyboard.addCmd(
  "actionName", 
  null, 
  [65], // Key A
  myAction, {
    // options here
});

5. Enable/disable modifier keys.

// addCmd(name, ctrlKeys, keys, callback, options)
keyboard.addCmd(
  "actionName", 
  { 
    ctrl: true,
    alt: false,
    shift: false,
  }, 
  [65], // Key Code or Key Name
  myAction, {
    // options here
});

6. Available options.

{
  preventDefault: false,
  groupName: "default",
  scope: this,
  repeat: false
}

7. Set another key for the action.

keyboard.setInputs(
  "groupName",
  "myAction",
  { 
    ctrl: false, 
    alt: false, 
    shift: false 
  },
  ["Z"]
);

8. More API methods.

// start watching for commands
keyboard.listen(groupName);
// ignore action groups
keyboard.ignore(groupName);
// reset
keyboard.default(groupName, commandName);
// get command
keyboard.getCmd(groupName, commandName);

Changelog:

v3.0.1 (05/24/2021)

• Fix scope option typing for TypeScript users.