Function App

examples/preact/useHeldKeys/src/index.tsx:13–128

()

import './index.css'

function App() {
  const heldKeys = useHeldKeys()
  const heldCodes = useHeldKeyCodes()

  // Track history of key combinations
  const [history, setHistory] = React.useState<Array<string>>([])

  React.useEffect(() => {
    if (heldKeys.length > 0) {
      const combo = heldKeys
        .map((k) => formatForDisplay(k, { useSymbols: true }))
        .join(' + ')
      setHistory((h) => {
        // Only add if different from last entry
        if (h[h.length - 1] !== combo) {
          return [...h.slice(-9), combo]
        }
        return h
      })
    }
  }, [heldKeys])

  console.log('heldKeys', heldKeys)

  return (
    <div className="app">
      <header>
        <h1>useHeldKeys</h1>
        <p>
          Returns an array of all currently pressed keys. Useful for displaying
          key combinations or building custom shortcut recording.
        </p>
      </header>

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