How to add keyboard shortcuts in Electron JS Application?

Electron JS | Adding keyboard shortcuts: Here, we are going to learn how to add keyboard shortcuts to an Electron JS Application?
Submitted by Godwill Tetah, on June 15, 2020

Just like in any other native desktop application, keyboard shortcuts save time and make it easy to perform some tasks like closing an app, copy, paste, zoom-in, cut, and more.

In this tutorial, we will add a keyboard shortcut that will accompany a menu item.

That is, rather than clicking on that menu item, the user can simply press the keyboard shortcut and the task will be done.

This tutorial only handles keyboard shortcuts. If you're new in Electron JS, consider checking my recent articles under the list of articles.

In Electron JS, accelerators are responsible for adding keyboard shortcuts. Below is the definition of accelerators from their official documentation:

Accelerators are Strings that can contain multiple modifiers and a single key code, combined by the + character, and are used to define keyboard shortcuts throughout your application.

For example, CTRL+A, CTRL+SHIFT+Q

Where "CTRL" is the modifier and "Q" is the key code.

The full list of modifiers and key codes can be found on their official documentation.

Open your main JavaScript file and type the following,

const electron = require ('electron')

const app = electron.app // electron module
const BrowserWindow = electron.BrowserWindow //enables UI
const Menu = electron.Menu // menu module

let win

app.on('ready', _ => {
    win = new BrowserWindow({
    width: 800,
    height: 600,
    })
    const template = [
        {
            label: 'Help',   // Help menu item
            submenu: [{ // adds submenu items
                    label: 'About US',
                },{
                    label: 'Quit',
                    role: 'quit', // gives this menu the role to close app when clicked  
                    accelerator: 'Ctrl+Q'  // creates a shortcut to this action

                }]
        }
    ]
    // sets the menu
	const menu = Menu.buildFromTemplate (template)
    Menu.setApplicationMenu (menu)
})

Electron JS | Adding keyboard shortcuts (1)

Electron JS | Adding keyboard shortcuts (2)

You can see the way the shortcut is written beside the submenu just like in any other native desktop application. On pressing the above command, watch as the app closes.

Shortcuts can also be added using the globalShortcut module using the register method.

Example: In the same file above modify the code;

const electron = require ('electron')
const {globalShortcut } = require('electron')

const app = electron.app // electron module
const BrowserWindow = electron.BrowserWindow //enables UI
const Menu = electron.Menu // menu module

let win

app.on('ready', _ => {
    win = new BrowserWindow({
    width: 800,
    height: 600,
    })

    globalShortcut.register('Control+L', () => {  // creates a global shortcut
        console.log ('gobal shortcut presses')      // action when shortcut is pressed
                        })
    const template = [
        {
            label: 'Help',   // Help menu item
            submenu: [{                             // adds submenu items
                    label: `About US`,
                },{
                    label: 'Quit',
                    role: 'quit',            // gives this menu the role to close app when clicked  
                    accelerator: 'Ctrl+Q'   // creates a shortcut to this action

                }]
        }
    ]
    const menu = Menu.buildFromTemplate (template)     // sets the menu
    Menu.setApplicationMenu (menu)

})

Electron JS | Adding keyboard shortcuts (3)

Whenever "CTRL+L" is pressed, that statement is logged or printed out on the console as seen above