Hotkey recorder
Capture a chord and display it as keycaps
Toggle command palette
⇧⌘P
empty
Click to record
bound
⇧⌘P
Using TanStack Hotkeys.
Usage
import { HotkeyRecorder } from "@gpuixui/components";
<HotkeyRecorder
label="Toggle command palette"
value={hotkey}
onChange={setHotkey}
/>;API
| Prop | Type | Default |
|---|---|---|
label | string | — |
value | string | null | null |
onChange | (value: string | null) => void | — |
onRecordingChange | (recording: boolean) => void | — |
placeholder | string | "Click to record" |
disabled | boolean | false |
style | StateStyle<HotkeyRecorderState> | — |
className | string | — |
Gating your own bindings
A recorded key is swallowed with preventDefault, which removes the element's
default action — not the window's. GPUix still delivers the key to an
application-level onKeyDown, measured by the playground's
hotkey-recorder-lifecycle probe (window=shift,k on the press that stored
Mod+Shift+K), so the app owns the gate:
const [recording, setRecording] = useState(false);
<AppShell
onKeyDown={(event) => {
if (recording) return;
dispatchShortcut(event);
}}
>
<HotkeyRecorder
label="Toggle command palette"
value={hotkey}
onChange={setHotkey}
onRecordingChange={setRecording}
/>
</AppShell>;Keyboard
- EnterSpace
- starts a recording, and clears through the clear target
- Escape
- cancels a recording
read from hotkey-recorder.tsx
Edit this page on GitHubpackages/components/docs/hotkey-recorder.mdx