tinykeys

A tiny (~400 B) & modern library for keybindings.

npm install tinykeys

Examples

Try some of the following:

• Shift+D
• y e e t
• Control+D (Windows/Linux) or Command+D (Mac)

import tinykeys from "tinykeys"

tinykeys(window, {
	"Shift+D": () => {
		alert("The 'Shift' and 'd' keys were pressed at the same time")
	},
	"y e e t": () => {
		alert("The keys 'y', 'e', 'e', and 't' were pressed in order")
	},
	"$mod+([1-9])": event => {
		event.preventDefault()
		alert(`Either 'Control+${event.key}' or 'Meta+${event.key}' were pressed`)
	},
})
what does this button do
import confetti from "canvas-confetti"

let KonamiCode = [
	"ArrowUp",
	"ArrowUp",
	"ArrowDown",
	"ArrowDown",
	"ArrowLeft",
	"ArrowRight",
	"ArrowLeft",
	"ArrowRight",
	"KeyB",
	"KeyA",
	"Enter",
].join(" ")

tinykeys(window, {
	[KonamiCode]: () => {
		confetti()
	},
})

Debugger

Typing will log details of the event that was fired

Note: event.getModifierState(event.key) tests if the key pressed is considered a "modifier" key