Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Hotkeys API Reference
Hotkey Sequence API Reference
Key hold & held keys API Reference
Hotkey Recorder API Reference
Hotkey Sequence Recorder API Reference
Normalization & format API Reference
Key hold & held keys API Reference

useHeldKeyCodes

Function: useHeldKeyCodes()

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

Defined in: packages/vue-hotkeys/src/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>