Todos los componentes (244)

Atajos de teclado

Acciones · ShortcutsProvider

Qué es y cuándo usarlo

Reúne los atajos de teclado de la aplicación: cada pieza registra los suyos con useShortcut y un solo escuchador decide cuál salta. Mayús+? abre la ayuda con todos.

Cuándo usarlo

Una aplicación con atajos repartidos por varias pantallas y componentes.
useShortcut({ id, keys, label, group, scope }, handler) registra un atajo mientras el componente está montado. mod es Cmd en Mac y Ctrl en el resto.
useShortcutScope('editor', activo) activa un ámbito: sus atajos ganan a uno global con la misma combinación mientras está activo.
useShortcutConflicts() devuelve los que chocan. Con overrides y onOverridesChange, cada persona cambia sus atajos desde la ayuda pulsando la combinación nueva, y se guardan donde diga la aplicación.

Cuándo no

Un solo atajo en una pantalla: useHotkeys.

Teclado: escribiendo en un campo, un atajo sin modificador no salta (una / dentro de un campo es una barra).

Accesibilidad: la ayuda es un diálogo con los atajos por apartado y sus teclas como se pulsan en ese sistema; cambiar uno avisa si choca y se anuncia.

Aspecto fino: las teclas son las de Kbd.

Cómo se ve

Pedidos creados con el atajo: 0

<ShortcutsProvider>
  <Pedidos />
</ShortcutsProvider>

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

Props

Se importa con import { ShortcutsProvider } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`helpKeys`	`string \| null`	El atajo que abre la ayuda con todos. Por defecto, `shift+?`. `null` no la abre.
`onOverridesChange`	`(overrides: ShortcutOverrides) => void`	—
`overrides`	`Readonly<Record<string, string>>`	Los atajos que ha cambiado la persona. Si se pasa con `onOverridesChange`, se pueden cambiar desde la ayuda.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech:

Interactivo