useHotkeys | TanStack Hotkeys Español

function useHotkeys(hotkeys, commonOptions?): void;

Defined in: useHotkeys.ts:73

Vue composable for registering multiple keyboard hotkeys at once.

Uses the singleton HotkeyManager for efficient event handling. Accepts a dynamic array of hotkey definitions, making it safe to use with variable-length lists.

Options are merged in this order: HotkeysProvider defaults < commonOptions < per-definition options

Parameters

hotkeys

MaybeRefOrGetter<UseHotkeyDefinition[]>

Array of hotkey definitions to register, or a getter/ref

commonOptions?

MaybeRefOrGetter<UseHotkeyOptions> = {}

Shared options applied to all hotkeys (overridden by per-definition options)

Returns

void

Examples

<script setup>
import { useHotkeys } from '@tanstack/vue-hotkeys'

useHotkeys([
  { hotkey: 'Mod+S', callback: () => save() },
  { hotkey: 'Mod+Z', callback: () => undo() },
  { hotkey: 'Escape', callback: () => close() },
])
</script>

<script setup>
import { computed } from 'vue'
import { useHotkeys } from '@tanstack/vue-hotkeys'

const items = computed(() => [...])
// Dynamic hotkeys from reactive data
useHotkeys(
  () => items.value.map((item) => ({
    hotkey: item.shortcut,
    callback: item.action,
    options: { enabled: item.enabled },
  })),
  { preventDefault: true },
)
</script>