HotkeyRecorder

Code

import { HotkeyRecorder } from "@fadymondy/nasaq/web";import { useState } from "react";export function Example() {  const [value, setValue] = useState<string | null>("Mod+K");  return <HotkeyRecorder value={value} onValueChange={setValue} requireModifier resetTo="Mod+K" label="Command palette" />;}

Keyboard & Commands · stable

Live examples and controls: HotkeyRecorder in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/hotkey-recorder.json

Click the control, press the keys, done. The result is a string such as "Mod+Shift+K" (or a sequence "G I") that you store and bind. Keys are read from event.code, so a person on an Arabic layout who presses the K key gets "K", not the Arabic letter. Shortcuts the browser (Ctrl+W) or the OS (Alt+F4, Cmd+Q) keep are refused, and clashes with other bindings are shown as you record. Escape cancels, Backspace clears.

When to useCopy Anchor Link

• A "Keyboard shortcuts" page in settings: HotkeyBindings.
• One customisable shortcut: HotkeyRecorder.

When not to useCopy Anchor Link

• Showing shortcuts read-only: KeyboardShortcuts.

ImportCopy Anchor Link

import { HotkeyRecorder, HotkeyBindings, hotkeyMatches, hotkeyParse } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { HotkeyRecorder } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Example() {
  const [value, setValue] = useState<string | null>("Mod+K");
  return <HotkeyRecorder value={value} onValueChange={setValue} requireModifier resetTo="Mod+K" label="Command palette" />;
}

To run a stored shortcut, use the pure helpers: hotkeyMatches(hotkeyParse("Mod+K")![0], event, apple).

AnatomyCopy Anchor Link

HotkeyRecorder      data-slot="hotkey-recorder"  (data-recording)
├─ button           shows ShortcutKeys, or the prompt while recording
├─ clear / reset    icon buttons
├─ ul               error and clash messages (role="alert" for errors)
└─ span role="status"  polite announcements
HotkeyBindings      data-slot="hotkey-bindings": groups of rows, one recorder each, Reset all

APICopy Anchor Link

HotkeyRecorderCopy Anchor Link

HotkeyBindingsCopy Anchor Link

Logic (no React)Copy Anchor Link

hotkeyParse, hotkeyFormat, hotkeyFromEvent, hotkeyMatches, hotkeyRecordKey, hotkeyValidate, hotkeyConflicts, hotkeyReservedBy, hotkeyKeys, hotkeyLabel, hotkeyTextMatches, HOTKEY_RESERVED.

AccessibilityCopy Anchor Link

• Blur stops recording. Results and errors are announced through a polite status region.
• Errors use aria-invalid and aria-describedby.

RTL & i18nCopy Anchor Link

Key caps are always left to right. Messages are en and ar. Recording uses the physical key, so layouts do not matter.

Styling & tokensCopy Anchor Link

Border, focus and danger tokens of the form controls. Extend with className.

Do / Don'tCopy Anchor Link

• Do set requireModifier for app-wide shortcuts.
• Do store the string, not the caps.
• Do not allow reserved shortcuts unless the app runs as a desktop app.

RelatedCopy Anchor Link

• KeyboardShortcuts
• Commands

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-keyboard-commands-hotkey-recorder--docs