Tiny Key Binding JavaScript Library – Tinykeys.js

Preview:

Description:

A super tiny (less than 1kb) JavaScript library for handling key bindings on the web app.

How to use it:

1. Install & download.

# NPM
$ npm i tinykeys --save

2. Import the Tinykeys.js.

# ES Module
import { tinykeys } from "tinykeys"
# Browser
<script src="https://cdn.jsdelivr.net/npm/tinykeys/dist/tinykeys.umd.js"></script>

3. Add keyboard shortcuts for actions in your web app.

// Or window.tinykeys using the CDN version
tinykeys(window, {
  "Shift+D": () => {
    alert("The 'Shift' and 'd' keys were pressed at the same time")
  },
  "c s s": () => {
    alert("The keys 'c', 's', 's' were pressed in order")
  },
  "$mod+KeyD": () => {
    alert("Either 'Control+d' or 'Meta+d' were pressed")
  },
  "$mod+([0-9])": () => {
    alert(`Either 'Control+${event.key}' or 'Meta+${event.key}' were pressed`)
  },
})

4. Available options.

tinykeys(window, {
  // keybinds here
},{
  // "keydown" or "keyup"
  event: "keyup",
  capture: true,
  // Keybinding sequences will wait this long between key presses before cancellin
  timeout: 1000,
})

Changelog:

v3.0.0 (08/22/2024)

• Add regex matching and export more