Keybind

Keybind is a component for capturing and displaying keyboard and mouse button bindings. It stores values as Windows Virtual Key codes (number) which map directly to the VK_* constants used on the C++ side.

import { Keybind } from "@/components/keybind";

<Field name="Menu Keybind" description="Key to toggle the menu">
  <Keybind
    value={data.menu_keybind}
    onChange={(menu_keybind) => set({ ...data, menu_keybind })}
  />
</Field>;

Props

How it Works

Clicking the button opens a modal with a capture area. Clicking the capture area starts listening for any keyboard or mouse button input. Once a key is pressed it's displayed as a human readable name — pressing Confirm calls onChange with the Virtual Key code, pressing Cancel discards it.

Supported inputs include keyboard keys, F1–F24, numpad keys, mouse buttons (Left, Right, Middle, Mouse 4, Mouse 5), and most OEM/special keys.

Virtual Key Codes

Values are stored as Windows Virtual Key codes. This means they map directly to VK_* constants in C++ with no conversion needed:

// C++ config struct
unsigned int menu_keybind = VK_INSERT; // 0x2D = 45

// TypeScript interface
interface OverlayConfig {
  menu_keybind: number;
}

When the user sets Insert in the UI, onChange is called with 45 (0x2D), which is the same value as VK_INSERT on the C++ side.