Create Custom Key Binding Events – Shortcut.js

Preview:

Description:

Shortcut.js is a tiny keyboard shortcuts library that makes any element (component) react to custom keyboard events.

How to use it:

1. Download and import the Shortcut.js as an ES module.

import Shortcut from './src/Shortcut.js';

2. Initialize the Shortcut.js and we’re ready to go.

const myShortCuts = new Shortcut({
      // options here
});

3. Register shortcuts as follows:

myShortCuts.register('B', () => {
  // triggered when you press B
});
myShortCuts.register('Ctrl+F', () => {
  // triggered when you press Ctrl+F
});

4. Unregister shortcuts using the remove method.

myShortCuts.remove('B');
myShortCuts.remove('Ctrl+F');
myShortCuts.removeAll();

5. Determine the key event to react from. Default: ‘keydown’.

const myShortCuts = new Shortcut({
      keyEvent: 'keyup'
});

6. Determine whether to auto repeat the event if the key is held on. Default: ‘true’.

const myShortCuts = new Shortcut({
      autoRepeat: false
});

7. Determine whether to prevent default action. Default: false.

const myShortCuts = new Shortcut({
      noPrevention: true
});

8. You can also pause & resume the shortcuts using the following methods:

myShortCuts.pause('B');
myShortCuts.resume('B');
myShortCuts.pauseAll();
myShortCuts.resumeAll();

Changelog:

12/12/2020

• add no prevent default option

v1.0.2 (12/08/2020)

• improved single key shortcut