VCF Keyboard Shortcut Manager

A modern library for managing keyboard shortcuts in a Vaadin application (or any framework).

• Dispatch custom events from keyboard shortcuts.
• Bind multiple keyboard commands to a single event listener.
• Easily create simple keyboard shortcut help dialog/popup.
• Compatible with web components and Shadow DOM.
• Implemented in TypeScript.

This is a wrapper for the Tinykeys library.

DEMO ↗

API ↗

Install

npm i @vaadin-component-factory/keyboard-shortcut-manager

Usage

Create an array of KeyboardShortcut definitions:

const shortcuts: KeyboardShortcut = [
  {
    keyBinding: 'Control+Shift+?',
    handler: 'help-dialog',
    description: 'Opens the help dialog.'
  }
];

Then create a KeyboardShortcutManager instance and subscribe your shortcuts to activate them:

const ksm = new KeyboardShortcutManager({ shortcuts, helpDialog: true });

ksm.subscribe();

Keybinding Syntax

Refer to the following links for more information on the keybinding syntax:

• Keys and Codes
• Keybinding Syntax

Publish the component to NPM

npm login

git commit -a -m "v${version}"
npm version ${version}
npm publish --registry https://registry.npmjs.org/
git reset HEAD~2
git commit -a -m "v${version}"
git push
git push origin v${version}

License

Apache-2.0 License