Skip to main content

​
Introduction to react-hotkeys-hook

react-hotkeys-hook is a powerful and flexible React hook that provides a declarative way to handle keyboard shortcuts in your React applications. With a tiny bundle size and full TypeScript support, it’s the perfect solution for adding keyboard navigation and shortcuts to your apps.

​
What is react-hotkeys-hook?

At its core, react-hotkeys-hook provides the useHotkeys hook that allows you to listen to keyboard events in a React-friendly way. Instead of manually adding and removing event listeners, you simply declare what keys you want to listen to and what should happen when they’re pressed. 
import { useHotkeys } from 'react-hotkeys-hook'

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  useHotkeys('ctrl+k', () => setCount(count + 1), [count])

  return (
    <p>
      Pressed {count} times.
    </p>
  )
}

​
Key Features

​
Declarative API

Define keyboard shortcuts directly in your components without worrying about event listener cleanup or memory leaks. The hook handles all the lifecycle management for you.

​
Flexible Key Combinations

Support for:
  • Single keys: 'a', 'esc', 'space'
  • Modifier combinations: 'ctrl+k', 'meta+shift+a', 'alt+b'
  • Multiple hotkeys: ['ctrl+k', 'ctrl+p'] or 'ctrl+k, ctrl+p'
  • Key sequences: 'y>e>e>t' (like Vim)
  • Wildcards: '*' to listen to any key

​
Scopes for Complex UIs

Organize hotkeys into scopes to prevent conflicts and enable/disable groups of shortcuts based on your application state. 
const App = () => {
  return (
    <HotkeysProvider initiallyActiveScopes={['settings']}>
      <ExampleComponent />
    </HotkeysProvider>
  )
}

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1), { scopes: ['settings'] })

  return (
    <p>
      Pressed {count} times.
    </p>
  )
}

​
Focus Trapping

Limit hotkeys to specific elements by using the ref returned from the hook: 
export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  const ref = useHotkeys<HTMLParagraphElement>('ctrl+k', () => setCount(prevCount => prevCount + 1))

  return (
    <p tabIndex={-1} ref={ref}>
      Pressed {count} times.
    </p>
  )
}

​
Form Field Handling

By default, hotkeys are disabled when typing in input fields to prevent accidental triggers. You can customize this behavior with the enableOnFormTags option.

​
Runtime Key Detection

Check if a key is currently pressed anywhere in your application: 
import { isHotkeyPressed } from 'react-hotkeys-hook'

isHotkeyPressed('esc') // Returns true if Escape key is pressed down.
isHotkeyPressed(['esc', 'ctrl+s']) // Returns true if Escape or Ctrl+S are pressed down.

​
Why react-hotkeys-hook?

Tiny Bundle Size

Minimal impact on your application’s bundle size with tree-shaking support

TypeScript First

Written in TypeScript with full type definitions for the best developer experience

Framework Agnostic

Works with any React application - CRA, Next.js, Vite, Remix, and more

Production Ready

Battle-tested in production applications with extensive test coverage

​
Common Use Cases

  • Keyboard navigation: Navigate through your application using arrow keys
  • Command palettes: Trigger search or command interfaces with shortcuts like cmd+k
  • Editor shortcuts: Build rich text editors or code editors with familiar shortcuts
  • Accessibility: Provide keyboard alternatives to mouse-only interactions
  • Power user features: Add advanced shortcuts for experienced users
  • Gaming and interactive UIs: Handle complex key combinations and sequences

​
Next Steps

Installation

Get started by installing react-hotkeys-hook in your project

Quick Start

Learn the basics with a hands-on example

Build docs developers (and LLMs) love

Get started for freeTalk to us