Function App

examples/preact/useHotkey/src/index.tsx:13–738

()

import './index.css'

function App() {
  const [lastHotkey, setLastHotkey] = React.useState<Hotkey | null>(null)
  const [saveCount, setSaveCount] = React.useState(0)
  const [incrementCount, setIncrementCount] = React.useState(0)
  const [enabled, setEnabled] = React.useState(true)
  const [activeTab, setActiveTab] = React.useState(1)
  const [navigationCount, setNavigationCount] = React.useState(0)
  const [functionKeyCount, setFunctionKeyCount] = React.useState(0)
  const [multiModifierCount, setMultiModifierCount] = React.useState(0)
  const [editingKeyCount, setEditingKeyCount] = React.useState(0)

  // Scoped shortcuts state
  const [modalOpen, setModalOpen] = React.useState(false)
  const [editorContent, setEditorContent] = React.useState('')
  const [sidebarShortcutCount, setSidebarShortcutCount] = React.useState(0)
  const [modalShortcutCount, setModalShortcutCount] = React.useState(0)
  const [editorShortcutCount, setEditorShortcutCount] = React.useState(0)

  // Refs for scoped shortcuts
  const sidebarRef = React.useRef<HTMLDivElement>(null)
  const modalRef = React.useRef<HTMLDivElement>(null)
  const editorRef = React.useRef<HTMLTextAreaElement>(null)

  // Type-safe refs for useHotkey (HTMLTextAreaElement extends HTMLElement)
  const editorRefForHotkey = editorRef as React.RefObject<HTMLElement | null>

  // ============================================================================
  // Basic Hotkeys
  // ============================================================================

  // Browser default: Save page (downloads the current page)
  // Basic hotkey with callback context
  useHotkey('Mod+S', (_event, { hotkey, parsedHotkey }) => {
    setLastHotkey(hotkey)
    setSaveCount((c) => c + 1)
    console.log('Hotkey triggered:', hotkey)
    console.log('Parsed hotkey:', parsedHotkey)
  })

  // requireReset prevents repeated triggering while holding keys
  useHotkey(
    'Mod+K',
    (_event, { hotkey }) => {
      setLastHotkey(hotkey)
      setIncrementCount((c) => c + 1)
    },
    { requireReset: true },
  )

  // Conditional hotkey (enabled/disabled)
  useHotkey(
    'Mod+E',
    (_event, { hotkey }) => {
      setLastHotkey(hotkey)
      alert('This hotkey can be toggled!')
    },
    { enabled },
  )