@vielzeug/keymap

Headless keyboard shortcut manager with chord sequences

Installation

pnpm add @vielzeug/keymap
npm install @vielzeug/keymap
yarn add @vielzeug/keymap

Quick Start

import { createKeymap, formatShortcut } from '@vielzeug/keymap';

const isEditableTarget = (target: EventTarget | null): boolean =>
  target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;

const map = createKeymap([
  { id: 'save', shortcut: 'mod+k mod+s', handler: () => console.log('save') },
  { id: 'palette', shortcut: 'mod+shift+p', handler: () => console.log('open palette') },
  { id: 'top', shortcut: 'g g', handler: () => window.scrollTo({ top: 0 }) },
  { id: 'close', shortcut: 'escape', handler: () => console.log('close panel'), when: (event) => !isEditableTarget(event.target) },
  { id: 'play', shortcut: 'space', handler: () => console.log('toggle playback'), trigger: 'keyup' },
]);

const unmount = map.mount(document);
console.log(formatShortcut('mod+shift+p', 'meta')); // ⇧⌘P

unmount();
map.dispose();

Documentation

• Overview
• Usage Guide
• API Reference
• Examples
• Migration Guide

License

MIT © Helmuth Saatkamp: part of the Vielzeug monorepo.