Skip to content

Commit 2733e72

Browse files
ryan-williamsclaude
andcommitted
Document useActionPair, useActionTriplet, sortOrder, and builtinGroup in README
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 07834de commit 2733e72

File tree

1 file changed

+63
-0
lines changed

1 file changed

+63
-0
lines changed

README.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,60 @@ useAction('app:shortcuts', {
118118
})
119119
```
120120

121+
Control display order within a group with `sortOrder` (lower values appear first; default `0`, ties broken by registration order):
122+
123+
```tsx
124+
useAction('app:shortcuts', {
125+
label: 'Show shortcuts',
126+
sortOrder: 0, // Appears first
127+
// ...
128+
})
129+
useAction('app:omnibar', {
130+
label: 'Command palette',
131+
sortOrder: 1, // Appears second
132+
// ...
133+
})
134+
```
135+
136+
### Action Pairs
137+
138+
Collapse two inverse actions into a single compact row in `ShortcutsModal` with `useActionPair`:
139+
140+
```tsx
141+
import { useActionPair } from 'use-kbd'
142+
143+
useActionPair('view:zoom', {
144+
label: 'Zoom in / out',
145+
group: 'View',
146+
actions: [
147+
{ defaultBindings: ['='], handler: () => zoomIn() },
148+
{ defaultBindings: ['-'], handler: () => zoomOut() },
149+
],
150+
})
151+
```
152+
153+
Creates `view:zoom-a` and `view:zoom-b` actions, displayed as one row: `Zoom in / out [=] / [-]`
154+
155+
### Action Triplets
156+
157+
Same pattern for three related actions with `useActionTriplet`:
158+
159+
```tsx
160+
import { useActionTriplet } from 'use-kbd'
161+
162+
useActionTriplet('view:slice', {
163+
label: 'Slice along X / Y / Z',
164+
group: 'View',
165+
actions: [
166+
{ defaultBindings: ['x'], handler: () => sliceX() },
167+
{ defaultBindings: ['y'], handler: () => sliceY() },
168+
{ defaultBindings: ['z'], handler: () => sliceZ() },
169+
],
170+
})
171+
```
172+
173+
Creates `view:slice-a`, `-b`, `-c` actions, displayed as: `Slice along X / Y / Z [X] / [Y] / [Z]`
174+
121175
### Sequences
122176

123177
Multi-key sequences like Vim's `g g` (go to top) are supported:
@@ -307,6 +361,7 @@ Wrap your app to enable the hotkeys system:
307361
sequenceTimeout: Infinity, // ms before sequence times out (default: no timeout)
308362
disableConflicts: false, // Disable keys with multiple actions (default: false)
309363
enableOnTouch: false, // Enable hotkeys on touch devices (default: false)
364+
builtinGroup: 'Meta', // Group name for built-in actions (default: 'Meta')
310365
}}>
311366
{children}
312367
</HotkeysProvider>
@@ -596,6 +651,14 @@ useOmnibarEndpoint('filters', {
596651
})
597652
```
598653

654+
### `useActionPair(id, config)`
655+
656+
Register two inverse actions as a compact pair. See [Action Pairs](#action-pairs).
657+
658+
### `useActionTriplet(id, config)`
659+
660+
Register three related actions as a compact triplet. See [Action Triplets](#action-triplets).
661+
599662
### `useEditableHotkeys(defaults, handlers, options?)`
600663

601664
Wraps `useHotkeys` with localStorage persistence and conflict detection.

0 commit comments

Comments
 (0)