Adding keyboard shortcuts to the application

Keyboard shortcuts are an essential part of a better user experience. This helps users to perform valuable tasks with one key press. Attaching keyboard shortcuts to common tasks, such as opening dev tools or refreshing the page, can also be useful during development. In this section, we will see how we can improve the development cycle by using Electron's building functionality. These details are not only suitable for tooling, but they can also work with real-life scenarios in your applications.

There are two ways that we can create keyboard shortcuts:

Using accelerators
Using global shortcuts

We have already discussed how to create menus and menu bars for Electron applications. You can attach keyboard shortcuts to this menu action using accelerators. They can contain multiple modifiers and key codes combined by the + character. You can use the following Electron modifiers along with the key codes:

Command (or Cmd for short)
Control (or Ctrl for short)
CommandOrControl (or CmdOrCtrl for short)
Alt
Option
AltGr
Shift
Super

For example, creating a menu with acceleration should be done as follows:

{ 
  label: 'Toggle Developer Tools', 
  accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I', 
  click (item, focusedWindow) { 
    if (focusedWindow) focusedWindow.webContents.toggleDevTools() 
  } 
}

The preceding code set the keyboard shortcut to the menu action using the accelerator.

You need to take care of the special keys when defining the accelerators. Always try to use CommandOrControl instead of using these keys individually as the command key does not have any effect on Windows and Linux. In this way, the shortcut can be working on all the platforms. In the same manner, the Option key only exists on Mac OS, whereas the Alt key is available on all platforms, so you can use it to make the shortcut available globally on all the platforms.

globalShortcut can register or unregister an event with the operating system. You need to keep in mind that these shortcuts are global and this will work even if the app does not have keyboard focus. You should not use this module until the app module emits the ready event. A globalShortcut can be defined as follows:

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

app.on('ready', () => { 
  const ret = globalShortcut.register('CommandOrControl+X', () => { 
    console.log('CommandOrControl+X is pressed') 
  }) 
}) 

app.on('will-quit', () => { 
  globalShortcut.unregister('CommandOrControl+X') 
})

You can use the gloablshortcut.unregisterAll method to remove all the handlers registered inside the application. You can also check whether a shortcut is registered or not using the globalshortcut.isregistered method by passing the accelerator as a parameter:

globalShortcut.isRegistered(accelerator)

Table of Contents for Adding keyboard shortcuts to the application

Create new playlist

Sign In

Sign Up

Table of Contents for
Adding keyboard shortcuts to the application