@remcostoeten/use-shortcut
Typed keyboard shortcuts for React.
A React hook for key combinations, sequences and scoped shortcuts, with cleanup and input handling built in.
1import { useShortcutBinding } from '@remcostoeten/use-shortcut/react'23export function CommandMenu() {4 useShortcutBinding('mod+k', openPalette, {5 description: 'Open command palette'6 })7useShortcutBinding covers a single shortcut. useShortcut returns a builder for modifiers, sequences and scopes. Every registration returns a handle you can unbind, disable or trigger.
Press g, then d.
1useShortcutBinding('g then d', goToDashboard, {2 sequenceTimeout: 10003})A shortcut tied to a scope only fires while that scope is active.
Useful when shortcuts come from settings or config.
1useShortcutMap({2 save: { keys: 'mod+s', handler: save },3 close: { keys: 'escape', handler: closeDialog },4 dashboard: { keys: 'g then d', handler: goToDashboard }5})useShortcutBinding(keys, handler, options?)keysA combo such as 'mod+k', a sequence such as 'g then d', or an array of either.options.preventDefaultBlocks the browser default. On by default.options.descriptionLabel shown in debug output and shortcut lists.const $ = useShortcut(options?)options.activeScopesScopes active when the builder mounts.options.ignoreInputsSkips shortcuts while typing in inputs. On by default.options.disabledTurns every shortcut off without unmounting.const result = $.mod.key('k').on(handler)unbind()Removes the shortcut.enable() / disable()Toggles it without removing it.trigger()Runs the handler from code.