React HotKeys

React HotKeys is a declarative library for binding keyboard shortcuts within React applications, scoping key handlers to components rather than attaching global keydown listeners. It wraps focus areas with HotKeys/GlobalHotKeys components (or withHotKeys HOCs) so shortcuts are only active while the relevant part of the UI has focus, following the DOM’s natural focus hierarchy.

The library supports key sequences and combinations, per-key-event handlers (keydown/keypress/keyup), a component-level key-map abstraction for describing available shortcuts, and utilities like getApplicationKeyMap for building a help screen listing every registered hotkey.

What You Get

• HotKeys and GlobalHotKeys components (plus withHotKeys HOC) for declaring focus-scoped or document-wide keyboard shortcuts
• Support for key sequences and combinations (e.g. ctrl+shift+k, sequential chords) with configurable event types (keydown/keypress/keyup)
• A component-level key-map abstraction separating shortcut definitions from their handler implementations
• ObserveKeys/IgnoreKeys components for fine-grained control over which nested areas respond to which keys
• getApplicationKeyMap() utility for introspecting every registered hotkey across the app, useful for building a shortcuts help screen

Common Use Cases

• Adding keyboard shortcuts to a specific panel or modal that shouldn’t fire when focus is elsewhere in the app
• Building a command-palette or power-user keyboard-driven interface (e.g. an editor, admin dashboard, or spreadsheet-like tool)
• Implementing vim-style sequential key chords for navigation within a component
• Generating an in-app “keyboard shortcuts” help modal by introspecting the registered application key map

Under The Hood

Architecture: the library’s src/ directory centers on HotKeys.js and GlobalHotKeys.js as the primary consumer-facing components, backed by withHotKeys.js (a higher-order component implementing the actual focus-tracking and event-binding logic), configure.js for library-wide settings, and a lib/ directory implementing the key-sequence matching engine that parses key-map strings into matchable combinations; recordKeyCombination.js and getApplicationKeyMap.js provide introspection utilities on top of a shared internal registry of mounted hotkey components. Tech Stack: plain JavaScript (ES2015+ with Babel, no TypeScript), built with Babel CLI for the CJS build and Rollup for the ES module build (index.es.js), tested with Enzyme against React 16’s adapter. Code Quality: the project has an Enzyme-based test/ suite and CodeClimate maintainability badge wired into its README, and documents its architecture in prose; however it has been without meaningful updates since early 2023 and its issue tracker reflects long-standing unaddressed reports, with parts of the community pointed toward newer alternatives (e.g. react-hotkeys-hook). API Design: the focus-scoped mental model (wrap the region that should own a shortcut, rather than binding globally) is the library’s core innovation and is well-documented in the README with diagrams, though the API surface (multiple components: HotKeys, GlobalHotKeys, ObserveKeys, IgnoreKeys, several HOCs) is larger than more minimal modern alternatives, giving it a moderate learning curve.