KeyMate is a lightweight and powerful library for managing keyboard shortcuts in web applications. It supports:
- Simple shortcuts (
Ctrl + S,Shift + A). - Key sequences (
Ctrl + K, followed byS). - Group-based management (namespaces) to enable or disable sets of shortcuts dynamically.
- ๐ Simple Shortcuts: Configure combinations like
Ctrl + SorShift + Alt + R. - ๐ Key Sequences: Detect successive combinations like
Ctrl + K > S. - ๐ท Group Management: Dynamically enable or disable groups of shortcuts.
- โก๏ธ Optimized: Centralized event management for maximum performance.
Install KeyMate using npm or yarn:
npm install keymateimport KeyMate from 'keymate';
const keymate = new KeyMate();keymate.registerShortcut('global', { ctrl: true, key: 's' }, (event) => {
console.log('Save triggered!');
});keymate.registerSequence('global', [
{ ctrl: true, key: 'k' },
{ key: 's' }
], (event) => {
console.log('Sequence Ctrl + K > S triggered!');
});keymate.toggleGroup('global', false); // Disable all shortcuts in the "global" group
keymate.toggleGroup('global', true); // Re-enable the "global" group- Remove a specific shortcut:
keymate.unregisterShortcut('global', { ctrl: true, key: 's' });- Remove all shortcuts in a group:
keymate.unregisterShortcut('global');- group: The namespace or context for the shortcut.
- combination: An object describing the key combination (
{ ctrl: boolean, shift: boolean, alt: boolean, key: string }). - callback: Function to execute when the shortcut is triggered.
- group: The namespace for the sequence.
- combination[]: An array of objects describing a sequence of key combinations.
- callback: Function to execute when the sequence is completed.
- group: The namespace of the shortcuts.
- combination (optional): The specific combination or sequence to remove. If not provided, all shortcuts in the group will be removed.
- group: The namespace of the shortcuts.
- enabled: A boolean to enable or disable the group.
- Returns an array containing all registered shortcuts across all groups.
keymate.registerSequence('editor', [
{ key: 'g' },
{ key: 'o' },
{ key: 't' }
], () => {
console.log('Sequence "G > O > T" triggered!');
});For example, activating shortcuts only within a modal:
const modalActive = true;
keymate.registerShortcut('modal', { key: 'Escape' }, () => {
if (modalActive) {
console.log('Modal closed!');
}
});
keymate.toggleGroup('modal', modalActive);-
Advanced Sequence Management:
- Add pause/resume functionality for sequences using TimePulse to manage delays precisely.
-
Dynamic Contextual Shortcuts:
- Enable/disable shortcuts dynamically based on specific elements in the DOM.
-
Inspection API:
- Add a method to list and debug all active shortcuts with their group and context.
-
Conflict Management:
- Automatically detect and resolve shortcut conflicts within the same group.
-
Mobile Support:
- Add support for gestures or keyboard shortcuts specific to mobile keyboards.
Contributions are welcome! If you have ideas or encounter issues, feel free to submit an issue or a pull request.
KeyMate is licensed under the MIT License. ๐๏ธ