Skip to main content

Keyboard shortcutsfor React.

Use a React hook to listen for keys, combinations, and sequences in your components.

Get started
Package manager
pnpm add react-hotkeys-hook
Your key

Press K anywhere, or tap the key.

The hook
useHotkeys('k', activate, {
  useKey: true,
  enabled: shortcutEnabled,
})

One hook connects the key to your action.

The result
0 presses

Your shortcut is ready.

Try a shortcut.

Focus the preview and press N to add a task, or use the button. Edit the code to see what happens next.

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

  const addTask = () => setTasks(current => [...current, 'New task'])
  const ref = useHotkeys('n', addTask, { useKey: true })

  return (
    <div ref={ref} tabIndex={0} className="task-preview"
      role="region" aria-label="Task preview: press N to add a task">
      <ul aria-live="polite" aria-relevant="additions">
        {tasks.map((task, i) => <li key={i}>{task}</li>)}
      </ul>
      <button type="button" onClick={addTask}>Add task</button>
    </div>
  )
}

render(<TaskManager />)
PreviewPress N

Shortcuts for React components.

Bind keys to actions, limit where shortcuts work, and let users record their own.

Bind a shortcut.

Call useHotkeys in your component to bind a shortcut to an action. No provider is needed.

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

function Editor() {
  useHotkeys('mod+s', saveDocument, {
    preventDefault: true,
  })

  return <Document />
}
See how it works

Scope shortcuts.

Attach a shortcut to a focused element, or group shortcuts into scopes for the parts of your app that need them.

const ref = useHotkeys('ctrl+b', toggleBold)Explore focus and scopes

Record custom shortcuts.

Let users record their own shortcuts with the useRecordHotkeys hook.

const [keys, controls] = useRecordHotkeys()Learn about recording

Add a shortcut to your app.

Get started Browse the API