Shortcut recorder
Press a combination and it is recorded as keycaps.
Click, then press a combination. Escape cancels.
Features
- Press a combination and it is shown as keycaps.
- Escape cancels, Backspace clears.
Use it for
- Settings for keyboard shortcuts.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react @base-ui/react lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { ShortcutRecorder } from 'runets'
<ShortcutRecorder label="Palette" value={keys} onChange={setKeys} />API
| Prop | Type | What it does |
|---|---|---|
value | string[] | Recorded keys. |
onChange | (keys) => void | Called on record. |
Accessibility
- A toggle button whose name says what is recorded.
Source
The code is in src/kit/inputs.tsx in runets, MIT licensed.