Skip to main content

​
React Hotkeys Hook

The most powerful React hook for handling keyboard shortcuts in your components

​
Why React Hotkeys Hook?

Build better user experiences with keyboard shortcuts that feel natural and responsive. React Hotkeys Hook provides a simple, declarative API for handling keyboard events in React applications.

Declarative API

Use React hooks to define keyboard shortcuts directly in your components

TypeScript First

Built with TypeScript for complete type safety and IntelliSense support

Scoped Shortcuts

Organize hotkeys with scopes to prevent conflicts and manage context

Key Sequences

Support for vim-style key sequences like ‘g>g’ for advanced workflows

​
Quick Example

Get started in seconds with a simple example: 
import { useHotkeys } from 'react-hotkeys-hook'

function App() {
  const [count, setCount] = useState(0)
  
  useHotkeys('ctrl+k', () => setCount(count + 1), [count])
  
  return <p>Pressed {count} times</p>
}

​
Key Features

Form Tag Support

Granular control over hotkeys in input fields and forms

Focus Trapping

Component-specific shortcuts that only trigger when focused

Modifier Keys

Full support for ctrl, shift, alt, meta, and the mod helper

Event Control

Prevent default browser behavior for custom shortcuts

Lightweight

Minimal bundle size with zero dependencies

React 16.8+

Works with modern React versions and hooks

​
Get Started

Installation

Install react-hotkeys-hook with your favorite package manager

Quickstart

Build your first keyboard shortcut in under 5 minutes

API Reference

Explore the complete API documentation

Examples

Learn from real-world usage patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us