Keyboard Shortcut Handling In Pure JavaScript – Combi

Combi is a tiny and easy JavaScript library to handle and keyboard shortcuts on the web application.

How to use it:

1. Install and import the Combi as an ES module.

# Yarn
$ yarn add combi
# NPM
$ npm install combi --save

import combi from 'combi'

2. Or load the UMD version of the Combi library in the document.

<script src="./dist/combi.umd.js"></script>
<!-- OR FROM A CDN -->
<script src="https://cdn.jsdelivr.net/npm/combi/dist/combi.umd.js"></script>

3. Use the Combi to listen to the keyboard shortcuts.

const myShortCut = combi((shortcut) => {
      // do something
})

4. Bind custom keyboard shortcuts.

const myShortCut = combi((shortcut) => {
      switch ((shortcut, event)) {
        case 'meta+s':
        case 'ctrl+s':
          event.preventDefault()
          action('save')
          break
        case 'ctrl+z':
          event.preventDefault()
          action('undo')
          break
        case localStorage.getItem('shortcut'):
          event.preventDefault()
          action('custom-action')
          break
        default:
      }
})

5. Determine whether or not to prevents the default action.

const myShortCut = combi((shortcut) => {
      // do something
}, true)