KikeyJS

An easy-to-use shortcut library for event handling, supporting key sequence, and shortcut recording.

Installation

Option 1: Use UMD (Universal Module Definition)


<script src="https://unpkg.com/kikey/dist/umd/kikey.min.js"></script>

Option 2: Use ECMAScript modules


<script type="module">
  import { createKikey } from "https://unpkg.com/kikey/dist/index.js"
</script>

Option 3: Via npm or jsr


npm install kikey
deno add @cclan/kikey

Let's Press G

Instantiate a kikey object by calling the Kikey.createKikey() function. Register key bindings with kikey.on(), and remove the callback with kikey.off(). Key bindings should be in lowercase, except for modifiers.


// Initialize kikey
const kikey = Kikey.createKikey();
// Bind event handler for the 'g' key
kikey.on("g", typeGettingStarted);
function typeGettingStarted() {
  // Remove event handler
  kikey.off(typeGettingStarted);
  startTyping();
}

Add ModifiersCtrl + Alt + U

Add modifiers like Ctrl + S for actions such as saving files. In KikeyJS, modifiers are represented by a single uppercase letter:

Each key binding should be concatenated with a - (dash); for example, A for Alt, S-o for Shift + O, and C-A-e for Ctrl + Alt + E. The order of modifiers doesn't matter, but the main key should always come last.


// Listen to the key combination 'Ctrl + Alt + U'
kikey.on("C-A-u", () => {
  // Start or stop the animation
  $("#letter-M").classList.toggle('rotate');
});

Key Sequence

Try pressing Shift + S ā†’ E ā†’ Q.

When listening for a key sequence, you can pass an optional third parameter in kikey.on() as a combo change callback. This function is called with a level argument, which indicates the current progress of the key sequence.


// Listen for the key sequence 'Shift + S', 'E', 'Q'
kikey.on(
  "S-s e q",
  function onComplete() {
    celebrate(); // Append with šŸŽ‰
  },
  // Optional argument
  function onComboChange(level) {
    if (level == 0) {
      // Sequence broken
      $("#level1").classList.remove("bright");
      $("#level2").classList.remove("bright");
      $("#level3").classList.remove("bright");
    } else {
      // Turn on the brightness for the corresponding level of key binding
      $("#level" + level).classList.add("bright");
    }
  },
);

Shortcut Recording

...

Manually entering key sequences for setting shortcuts can be tedious for users. KikeyJS provides a hotkey recording feature, allowing users to configure custom key bindings without needing to read this documentation.

Use kikey.startRecord() to start recording and kikey.stopRecord() to stop and retrieve the result string.


let started = false;
$("#record-btn").addEventListener("click", () => {
  if (!started) {
    started = true;
    $("#record-btn").textContent = "Stop Recording";
    $("#record-result").textContent = "Listening to your keyboard...";
    kikey.startRecord(); // Start recording
  } else {
    started = false;
    $("#record-btn").textContent = "Start Recording";
    // Stop and return the key sequence string
    const sequence = kikey.stopRecord();
    $("#record-result").textContent = sequence;
  }
});

Try it yourself

Now, try it yourself using the browser dev console! Had no idea? How about kikey.on("C-A-s", () => alert("Ctrl + Alt + S pressed!"))

API ReferencešŸ‘‹