ShortcutsOverlay
Lists the shortcuts in use now, grouped and searchable. Press ? to open it.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { Button, ShortcutsOverlay } from '@weft-js/warp'import { createShortcuts } from '@weft-js/warp-core'export function App() { const open = state(false) return ( <> <Button emphasis="outline" tone="neutral" onClick={() => (open.value = true)}>Keyboard shortcuts</Button> <ShortcutsOverlay open={open} shortcuts={KEYS} /> </> )}const KEYS = createShortcuts()Installation
npm install @weft-js/warpUsage
tsx
import { ShortcutsOverlay } from '@weft-js/warp'Accessibility
- ?
- Opens it
- Esc
- Closes it
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | State<boolean> | — | Whether it shows, if you want to own it. |
shortcuts | { register(s: Shortcut): () => void; list: () => Shortcut[]; subscribe(f… | registry | The list to read. Default: the shared one. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="shortcuts"] [data-part="groups"]
groupsempty
RelatedKbdCommand palette