useHeldKeyCodes | TanStack Hotkeys Vue Docs

function useHeldKeyCodes(): Ref<Record<string, string>>;

function useHeldKeyCodes(): Ref<Record<string, string>>;

Defined in: useHeldKeyCodes.ts:31

Vue composable that returns a reactive ref mapping currently held key names to their physical event.code values.

This is useful for debugging which physical key was pressed (e.g. distinguishing left vs right Shift via "ShiftLeft" / "ShiftRight").

Returns

Ref<Record<string, string>>

Reactive ref containing record mapping normalized key names to their event.code values

Example

vue

<script setup>
import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'

const heldKeys = useHeldKeys()
const heldCodes = useHeldKeyCodes()
</script>

<template>
  <div>
    <kbd v-for="key in heldKeys" :key="key">
      {{ key }} <small>{{ heldCodes[key] }}</small>
    </kbd>
  </div>
</template>

<script setup>
import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'

const heldKeys = useHeldKeys()
const heldCodes = useHeldKeyCodes()
</script>

<template>
  <div>
    <kbd v-for="key in heldKeys" :key="key">
      {{ key }} <small>{{ heldCodes[key] }}</small>
    </kbd>
  </div>
</template>