Function App

examples/solid/createHeldKeys/src/index.tsx:14–127

()

import './index.css'

function App() {
  const heldKeys = createHeldKeys()
  const heldCodes = createHeldKeyCodes()
  const [history, setHistory] = createSignal<Array<string>>([])

  createEffect(() => {
    const keys = heldKeys()
    if (keys.length > 0) {
      const combo = keys
        .map((k) => formatForDisplay(k, { useSymbols: true }))
        .join(' + ')
      setHistory((h) => {
        if (h[h.length - 1] !== combo) {
          return [...h.slice(-9), combo]
        }
        return h
      })
    }
  })

  return (
    <div class="app">
      <header>
        <h1>createHeldKeys</h1>
        <p>
          Returns a signal of all currently pressed keys. Useful for displaying
          key combinations or building custom shortcut recording.
        </p>
      </header>

      <main>
        <section class="demo-section">
          <h2>Currently Held Keys</h2>
          <div class="key-display">
            {heldKeys().length > 0 ? (
              heldKeys().map((key, index) => {
                const code = heldCodes()[key]
                return (
                  <>
                    {index > 0 && <span class="plus">+</span>}
                    <kbd class="large">
                      {formatForDisplay(key, { useSymbols: true })}
                      {code && code !== key && (
                        <small class="code-label">{code}</small>
                      )}
                    </kbd>
                  </>
                )
              })
            ) : (
              <span class="placeholder">Press any keys...</span>
            )}
          </div>
          <div class="stats">
            Keys held: <strong>{heldKeys().length}</strong>
          </div>
        </section>