Function: createKeyHold()

function createKeyHold(key): () => boolean;

function createKeyHold(key): () => boolean;

Defined in: createKeyHold.ts:46

SolidJS primitive that returns whether a specific key is currently being held.

This primitive uses useStore from @tanstack/solid-store to subscribe to the global KeyStateTracker and uses a selector to determine if the specified key is held.

Parameters

key

The key to check (e.g., 'Shift', 'Control', 'A') - can be an accessor function

IndividualKey | () => IndividualKey

Returns

Signal accessor that returns true if the key is currently held down

(): boolean;

(): boolean;

Returns

boolean

Examples

tsx

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

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

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

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

tsx

function ModifierIndicators() {
  const ctrl = createKeyHold('Control')
  const shift = createKeyHold('Shift')
  const alt = createKeyHold('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>
  )
}

function ModifierIndicators() {
  const ctrl = createKeyHold('Control')
  const shift = createKeyHold('Shift')
  const alt = createKeyHold('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>
  )
}