Skip to main content

​
Installation

Install react-hotkeys-hook using your preferred package manager: 
npm install react-hotkeys-hook

​
Requirements

react-hotkeys-hook has minimal peer dependencies:
  • React: >=16.8.0 (Hooks support required)
  • React DOM: >=16.8.0
react-hotkeys-hook uses React Hooks, so it requires React 16.8 or later. Make sure your project meets this requirement before installing.

​
TypeScript Support

react-hotkeys-hook is written in TypeScript and includes type definitions out of the box. No additional @types packages are needed. 
import { useHotkeys } from 'react-hotkeys-hook'
import type { HotkeyCallback, Options } from 'react-hotkeys-hook'

​
Verify Installation

After installation, verify that the package is correctly installed by importing it in your project: 
import { useHotkeys } from 'react-hotkeys-hook'

function App() {
  useHotkeys('ctrl+k', () => console.log('Hotkey triggered!'))
  
  return <div>Press Ctrl+K</div>
}
If you’re using a bundler like Webpack, Vite, or Rollup, they will automatically handle tree-shaking to ensure only the code you use is included in your bundle.

​
Framework-Specific Setup

​
Next.js

react-hotkeys-hook works seamlessly with Next.js (both Pages Router and App Router). No additional configuration is needed. 
'use client' // Only needed in App Router

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

export default function MyComponent() {
  useHotkeys('ctrl+k', () => console.log('Triggered!'))
  return <div>My Component</div>
}

​
Vite

No special configuration required. Just install and import: 
import { useHotkeys } from 'react-hotkeys-hook'

​
Create React App

Works out of the box with Create React App: 
import { useHotkeys } from 'react-hotkeys-hook'

​
Remix

Compatible with Remix. Use in client-side components: 
import { useHotkeys } from 'react-hotkeys-hook'

​
What’s Included

When you install react-hotkeys-hook, you get access to:
  • useHotkeys - The main hook for listening to keyboard shortcuts
  • useRecordHotkeys - A hook for recording keyboard shortcuts
  • HotkeysProvider - A context provider for managing scopes
  • useHotkeysContext - Access the hotkeys context
  • isHotkeyPressed - Check if a key is currently pressed
  • Full TypeScript type definitions

​
Next Steps

Now that you have react-hotkeys-hook installed, continue to the Quick Start guide to learn how to use it:

Quick Start

Learn how to use react-hotkeys-hook with practical examples

Build docs developers (and LLMs) love

Get started for freeTalk to us