All components (244)

Keyboard shortcuts

Actions · ShortcutsProvider

What it is and when to use it

Gathers the application's keyboard shortcuts: each piece registers its own with useShortcut and a single listener decides which one fires. Shift+? opens the help with all of them.

When to use it

An application with shortcuts spread across several screens and components.
useShortcut({ id, keys, label, group, scope }, handler) registers a shortcut while the component is mounted. mod is Cmd on Mac and Ctrl elsewhere.
useShortcutScope('editor', active) activates a scope: its shortcuts win over a global one with the same combination while it is active.
useShortcutConflicts() returns those that clash. With overrides and onOverridesChange, each person changes their shortcuts from the help by pressing the new combination, and they are saved wherever the application says.

When not to

A single shortcut on one screen: useHotkeys.

Keyboard: while typing in a field, a shortcut without a modifier does not fire (a / inside a field is a slash).

Accessibility: the help is a dialog with the shortcuts by section and their keys as pressed on that system; changing one warns if it clashes and is announced.

Fine appearance: the keys are those of Kbd.

What it looks like

Orders created with the shortcut: 0

<ShortcutsProvider>
  <Pedidos />
</ShortcutsProvider>

// Dentro de Pedidos
useShortcut({ id: "nuevo-pedido", keys: "mod+shift+n", label: "Create order" }, crearPedido)

Props

Import it with import { ShortcutsProvider } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`helpKeys`	`string \| null`	The shortcut that opens the help with all of them. `shift+?` by default. `null` does not open it.
`onOverridesChange`	`(overrides: ShortcutOverrides) => void`	—
`overrides`	`Readonly<Record<string, string>>`	The shortcuts the person has changed. If passed with `onOverridesChange`, they can be changed from the help.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech:

Interactivo