createHotkey | TanStack Hotkeys Español

function createHotkey(
   hotkey, 
   callback, 
   options?): void;

Defined in: createHotkey.ts:82

SolidJS primitive for registering a keyboard hotkey.

Uses the singleton HotkeyManager for efficient event handling. The callback receives both the keyboard event and a context object containing the hotkey string and parsed hotkey.

This primitive automatically tracks reactive dependencies and updates the registration when options or the callback change.

Parameters

hotkey

RegisterableHotkey | (() => RegisterableHotkey)

The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports mod for cross-platform)

callback

HotkeyCallback

The function to call when the hotkey is pressed

options?

| CreateHotkeyOptions | (() => CreateHotkeyOptions)

Options for the hotkey behavior

Returns

void

Examples

function SaveButton() {
  const [count, setCount] = createSignal(0)

  // Callback always has access to latest count value
  createHotkey('Mod+S', (event, { hotkey }) => {
    console.log(`Save triggered, count is ${count()}`)
    handleSave()
  })

  return <button onClick={() => setCount(c => c + 1)}>Count: {count()}</button>
}

function Modal(props) {
  // enabled option is reactive
  createHotkey('Escape', () => {
    props.onClose()
  }, () => ({ enabled: props.isOpen }))

  return <Show when={props.isOpen}>
    <div class="modal">...</div>
  </Show>
}

function Editor() {
  const [editorRef, setEditorRef] = createSignal<HTMLDivElement | null>(null)

  // Scoped to a specific element - use accessor so hotkey waits for ref
  createHotkey('Mod+S', save, () => ({ target: editorRef() }))

  return <div ref={setEditorRef}>...</div>
}