Function App

examples/preact/useKeyhold/src/index.tsx:7–105

()

import './index.css'

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

  return (
    <div className="app">
      <header>
        <h1>useKeyHold</h1>
        <p>
          Returns a boolean indicating if a specific key is currently held.
          Optimized to only re-render when that specific key changes.
        </p>
      </header>

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

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

        <section className="demo-section">
          <h2>Usage</h2>