Skip to content
TanStackHotkeys
Key hold & held keys API Reference

useKeyHold

ts
function useKeyHold(key): Ref<boolean>;

Defined in: useKeyHold.ts:51

Vue composable that returns a reactive ref indicating whether a specific key is currently being held.

This composable uses useSelector from @tanstack/vue-store to subscribe to the global KeyStateTracker and uses a selector to determine if the specified key is held.

Parameters

key

MaybeRefOrGetter<IndividualKey>

The key to check (e.g., 'Shift', 'Control', 'A')

Returns

Ref<boolean>

Reactive ref that is true if the key is currently held down

Examples

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

const isShiftHeld = useKeyHold('Shift')
</script>

<template>
  <div :style="{ opacity: isShiftHeld ? 1 : 0.5 }">
    {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}
  </div>
</template>
vue
<script setup>
import { useKeyHold } from '@tanstack/vue-hotkeys'

const ctrl = useKeyHold('Control')
const shift = useKeyHold('Shift')
const alt = useKeyHold('Alt')
</script>

<template>
  <div>
    <span :style="{ opacity: ctrl ? 1 : 0.3 }">Ctrl</span>
    <span :style="{ opacity: shift ? 1 : 0.3 }">Shift</span>
    <span :style="{ opacity: alt ? 1 : 0.3 }">Alt</span>
  </div>
</template>
Edit on GitHub
useHotkeyHint
HotkeyRecorder