Function App

examples/solid/createKeyHold/src/index.tsx:8–103

()

import './index.css'

function App() {
  const isShiftHeld = createKeyHold('Shift')
  const isControlHeld = createKeyHold('Control')
  const isAltHeld = createKeyHold('Alt')
  const isMetaHeld = createKeyHold('Meta')
  const isSpaceHeld = createKeyHold('Space')

  return (
    <div class="app">
      <header>
        <h1>createKeyHold</h1>
        <p>
          Returns an accessor indicating if a specific key is currently held.
          Optimized to only update when that specific key changes.
        </p>
      </header>

      <main>
        <section class="demo-section">
          <h2>Modifier Key States</h2>
          <div class="modifier-grid">
            <div class={`modifier-indicator ${isShiftHeld() ? 'active' : ''}`}>
              <span class="key-name">Shift</span>
              <span class="status">{isShiftHeld() ? 'HELD' : 'Released'}</span>
            </div>
            <div
              class={`modifier-indicator ${isControlHeld() ? 'active' : ''}`}
            >
              <span class="key-name">Control</span>
              <span class="status">
                {isControlHeld() ? 'HELD' : 'Released'}
              </span>
            </div>
            <div class={`modifier-indicator ${isAltHeld() ? 'active' : ''}`}>
              <span class="key-name">Alt / Option</span>
              <span class="status">{isAltHeld() ? 'HELD' : 'Released'}</span>
            </div>
            <div class={`modifier-indicator ${isMetaHeld() ? 'active' : ''}`}>
              <span class="key-name">Meta (⌘ / ⊞)</span>
              <span class="status">{isMetaHeld() ? 'HELD' : 'Released'}</span>
            </div>
          </div>
        </section>

        <section class="demo-section">
          <h2>Space Bar Demo</h2>
          <div class={`space-indicator ${isSpaceHeld() ? 'active' : ''}`}>
            {isSpaceHeld() ? '🚀 SPACE HELD!' : 'Hold Space Bar'}
          </div>
        </section>

        <section class="demo-section">
          <h2>Usage</h2>
          <pre class="code-block">{`import { createKeyHold } from '@tanstack/solid-hotkeys'

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