Skip to main content

Types of Keys

There are two types of keys:

  • Primary Keys
  • Modifier Keys

Modifier Keys​

Modifier keys are keys that do not perform an action by themselves, but change the meaning of other keys when held down.

Meta, Alt, Control and Shift are all the supported modifier keys.

Windows vs. macOS​

Control is the most used modifier key on Windows, but control on macOS is less commonly used. Instead Command aka. Meta is the main modifier on macOS.

Because most hotkeys will use the primary modifier on both systems there is the Mod key in React Better Hotkeys which resolves to Meta on macOS and Control on every other system.

tip

Use Mod instead of Meta or Control if possible to remain consistent across operating systems

Primary Keys​

All keys, which are no modifier keys, are primary keys.

Additionally, some primary keys can be referenced by KeyCode or KeyValue. To take some confusion out of defining hotkeys the possible keys are named after a pattern.

All keys which names start with Key, like KeyK, are the KeyValue-variant of this specific key. All Key...-keys have also a KeyCode-variant named exactly the same just without the prefix Key.

import { Hotkey, useHotkey } from "react-better-hotkeys";

useHotkey(Hotkey.Chord.K, () => {
  // triggered when the key with the keycode "k" gets pressed
});

useHotkey(Hotkey.Chord.KeyK, () => {
  // triggered when the key producing the symbol "k" gets pressed
});

Keyboard layouts​

Below are some examples of keyboard layouts. Each key is labelled with its key code and, if available, its key value.

By looking at the different layouts you can see how problems can emerge when using key values in hotkeys. Of course, sometimes you need or want the key value but if possible use the corresponding key code for a more stable experience.