pretty-key

Get a prettified string representation of a key.

npm install pretty-key

Usage

import getPrettyKey from "pretty-key";

// Basic key labels
getPrettyKey("esc"); // "⎋"
getPrettyKey("enter"); // "↩"
getPrettyKey("space"); // "␣"

// Chromium-style / keycode-ts2 aliases also work
getPrettyKey("ArrowLeft"); // "←"
getPrettyKey("MetaLeft"); // "⌘"
getPrettyKey("NumpadDivide"); // "÷"

// Build shortcut labels by formatting each key and joining them
["cmd", "shift", "p"].map(getPrettyKey).join("");
// "⌘⇧P"

// Switch platform-specific modifier output when needed
getPrettyKey("cmd", "mac"); // "⌘"
getPrettyKey("cmd", "windows"); // "❖"
getPrettyKey("alt", "windows"); // "Alt"

// Unknown keys fall back to the original input
getPrettyKey("customShortcutKey"); // "customShortcutKey"

A full list of keycodes can be found in ./src/index.ts. The list of supported keycodes is from KeyMappingCode from keycode-ts2, as well as common aliases. KeyMappingCode uses the Chromium keycodes as the source of truth.