Note! For the latest version numbers, check https://www.npmjs.com/package/@vaadin-component-factory/keyboard-shortcut-manager # VCF Keyboard Shortcut Manager [](https://www.npmjs.com/package/@vaadin-component-factory/keyboard-shortcut-manager) [](https://vaadin.com/directory/component/vaadin-component-factorykeyboard-shortcut-manager) A modern library for managing keyboard shortcuts in a [Vaadin](https://vaadin.com) 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). - Implemented in [TypeScript](https://www.typescriptlang.org/). This is a wrapper for the [Tinykeys](https://github.com/jamiebuilds/tinykeys) library. [DEMO ↗](https://keyboard-shortcut-manager.netlify.app/demo/index.html) [API ↗](https://keyboard-shortcut-manager.netlify.app) ## Install ```sh npm i @vaadin-component-factory/vcf-keyboard-chortcut-manager ``` ## Usage Create an array of `KeyboardShortcut` definitions: ```ts 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: ```ts 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](https://github.com/jamiebuilds/tinykeys#commonly-used-keys-and-codes) - [Keybinding Syntax](https://github.com/jamiebuilds/tinykeys#keybinding-syntax) ## License Apache-2.0 License