useShortcut

useShortcut works with Manti components or any other element.

mod+i

Import

import { useShortcut, useShortcuts } from '@manti-ui/react/shortcut';

The hooks are also exported from @manti-ui/react.

useShortcut('mod+k', () => setOpen(true));

Pass a ref as scope to fire only while focus is inside a region:

Editor regionClick to focus, then press ⌘S / Ctrl+S to save.Not saved

useShortcuts({
  'mod+k': openSearch,
  'mod+/': toggleHelp,
  'g d': goToDashboard,
});

mod+bmod+/g d

Press a shortcut…

Shortcuts are ignored in input, textarea, select, and contenteditable elements by default. Set enableOnFormElements to opt in.

Comment

Submitted ×0

mod means Command on macOS and Control elsewhere.

useShortcut(combo, handler, options?): void
useShortcuts(map, options?): void

Option	Default	Purpose
`scope`	`'global'`	Window or a ref-scoped subtree
`preventDefault`	`true`	Stop the browser's matching action
`enabled`	`true`	Toggle the binding
`enableOnFormElements`	`false`	Allow shortcuts while typing
`stopPropagation`	`false`	Stop event propagation
`sequenceTimeout`	`1000`	Sequence timeout in milliseconds

The implementation is SSR-safe and attaches listeners only in an effect.

Last updated 13 September 2026