`useHotkeys`

Binds keyboard shortcuts to handlers. Combos use a familiar string syntax: mod+k resolves to ⌘K on macOS and Ctrl+K elsewhere; shift+/ covers ?; + separates modifiers from the key.

By default shortcuts don’t fire while the user is typing inside an <input>, <textarea>, or [contenteditable] element — opt back in per binding with enableOnFormTags.


import { useHotkeys } from '@wire-ui/react'
 
function CommandPalette({ open, onOpen, onClose }) {
  useHotkeys({
    'mod+k': (e) => {
      e.preventDefault()
      onOpen()
    },
    'escape': () => onClose(),
  })
 
  return open ? <Palette /> : null
}

Scopes

Use scope + activeScopes to isolate a binding to a particular UI surface (e.g. shortcuts that only fire while a modal is open). Bindings with scope: '*' always fire.


useHotkeys(
  { 'enter': onSubmit },
  { scope: 'dialog', activeScopes: isOpen ? ['dialog'] : [] },
)

Parameters

Param	Type	Description
`map`	`Record<string, (event: KeyboardEvent) => void>`	Combo → handler.
`options`	`UseHotkeysOptions`	See below.

Options

Option	Type	Default	Description
`target`	`RefObject \| HTMLElement \| Window \| Document \| null`	`window`	Where to attach the listener.
`event`	`'keydown' \| 'keyup'`	`'keydown'`	Which keyboard event fires the handler.
`enabled`	`boolean`	`true`	Globally toggle all bindings.
`scope`	`string`	`'*'`	Scope name this binding belongs to.
`activeScopes`	`string[]`	`[]`	Scopes currently active. Bindings with `scope: '*'` ignore this.
`enableInInputs`	`boolean`	`false`	Allow bindings to fire while typing in `input` / `textarea` / `contenteditable`.
`preventDefault`	`boolean`	`false`	Call `event.preventDefault()` on every match.