React Hotkeys Hook

Keyboard shortcuts made simple

Build keyboard-driven interfaces with just a few lines of code. Try the demo below - click on the preview and use the keyboard shortcuts to interact with the task manager.

function TaskManager() {
  const [tasks, setTasks] = useState(['Learn useHotkeys', 'Build app', 'Ship it'])

  useHotkeys('n', () => setTasks([...tasks, 'New task']))

  return (
    <ul>
      {tasks.map((task, i) => <li key={i}>{task}</li>)}
    </ul>
  )
}

render(<TaskManager />)

Simple & Declarative

Define hotkeys with a single hook call. No complex setup, just import and use.

useHotkeys('ctrl+s', () => {
  saveDocument()
})

Scoped to Components

Scope hotkeys to specific components using refs. Hotkeys only trigger when the element is focused.

function Editor() {
  const ref = useHotkeys('ctrl+b', () => toggleBold())
  
  return (
    <div ref={ref} tabIndex={-1}>
      Click here to focus, then press ctrl+b
    </div>
  )
}

Sequences & Combinations

Support for modifier keys and sequential hotkeys. Create vim-style commands or complex shortcuts.

// Modifier combinations
useHotkeys('ctrl+shift+k', () => deleteLine())

// Sequential hotkeys (vim-style)
useHotkeys('g>i>t', () => goToInbox())

Record Custom Hotkeys

Let users define their own keyboard shortcuts. Perfect for customizable applications.

function HotkeyRecorder() {
  const [keys, { start, stop, isRecording }] = useRecordHotkeys()

  return (
    <div>
      <p>Recorded: {Array.from(keys).join(' + ')}</p>
      <button onClick={isRecording ? stop : start}>
        {isRecording ? 'Stop' : 'Record'}
      </button>
    </div>
  )
}

Quick Start

npm install react-hotkeys-hook

import { useHotkeys } from 'react-hotkeys-hook'

function App() {
  useHotkeys('ctrl+k', () => openSearch())
  
  return <div>...</div>
}

Read full documentation