useKeyHold | TanStack Hotkeys Français

function useKeyHold(key): boolean;

Defined in: useKeyHold.ts:45

React hook that returns whether a specific key is currently being held.

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

Parameters

key

IndividualKey

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

Returns

boolean

True if the key is currently held down

Examples

function ShiftIndicator() {
  const isShiftHeld = useKeyHold('Shift')

  return (
    <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>
      {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}
    </div>
  )
}

function ModifierIndicators() {
  const ctrl = useKeyHold('Control')
  const shift = useKeyHold('Shift')
  const alt = useKeyHold('Alt')

  return (
    <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>
  )
}