# react-hot-keys > React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Latest version **3.0.0** (published 2026-03-16) · MIT license · 0 weekly downloads ## Install ```sh npm install react-hot-keys pnpm add react-hot-keys yarn add react-hot-keys bun add react-hot-keys ``` ## Health **Score 60/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; has provenance. Warnings: low downloads. ## Facts | | | |---|---| | Version | 3.0.0 | | Published | 2026-03-16 | | First published | 2017-08-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 63.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 441 | | Author | kenny wang | | Maintainers | wcjiang | | Keywords | react-hot-keys, react-hotkey, hotkey, hotkeys, hotkeys-js, hotkeysjs, key, keys, keyboard, shortcuts, keypress | ## Links - npm: https://www.npmjs.com/package/react-hot-keys - Repository: https://github.com/jaywcjlove/react-hotkeys - Homepage: https://jaywcjlove.github.io/react-hotkeys/ - Issues: https://github.com/jaywcjlove/react-hotkeys/issues - npm.io page: https://npm.io/package/react-hot-keys ## Dependencies (1) - [hotkeys-js](https://npm.io/package/hotkeys-js.md) ^4.0.2 ## Recent versions - 3.0.0 (latest) — 2026-03-16 - 2.7.3 — 2023-12-17 - 2.7.2 — 2022-04-08 - 2.7.1 — 2021-09-10 - 2.7.0 — 2021-09-03 - 2.6.2 — 2020-12-28 - 2.6.1 — 2020-12-28 - 2.6.0 — 2020-06-15 - 2.5.2 — 2020-03-27 - 2.5.1 — 2020-02-19 - 2.5.0 — 2020-02-17 - 2.4.5 — 2019-12-04 - 2.4.4 — 2019-11-26 - 2.4.3 — 2019-11-26 - 2.3.1 — 2019-11-16 - … 19 more at https://npm.io/package/react-hot-keys/versions ## README
Using my app is also a way to support me:
Scap: Screenshot & Markup Edit Screen Test Deskmark Keyzer Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Mousio Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe
react-hotkeys === [![Buy me a coffee](https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee&logoColor=black)](https://jaywcjlove.github.io/#/sponsor) [![Follow On X](https://img.shields.io/badge/Follow%20on%20X-333333?logo=x&logoColor=white)](https://x.com/jaywcjlove) [![NPM Downloads](https://img.shields.io/npm/dm/react-hot-keys.svg?style=flat)](https://www.npmjs.com/package/react-hot-keys) [![CI](https://github.com/jaywcjlove/react-hotkeys/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/react-hotkeys/actions/workflows/ci.yml) [![npm package](https://img.shields.io/npm/v/react-hot-keys.svg)](https://www.npmjs.org/package/react-hot-keys) [![Coveralls](https://jaywcjlove.github.io/react-hotkeys/coverage/badges.svg)](https://jaywcjlove.github.io/react-hotkeys/coverage/lcov-report/) React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Uses a fork of [hotkeys.js](https://github.com/jaywcjlove/hotkeys) for keydown detection of special characters. You give it a keymap of shortcuts & it bind it to the mousetrap singleton. The, it'll unbind it when the component unmounts. ## Example ### Install ```sh npm i -S react-hot-keys ``` ### Demo Preview [demo](https://jaywcjlove.github.io/react-hotkeys/). - [Codepen example](https://codepen.io/jaywcjlove/pen/bJxbwG?editors=0010). - [CodesandBox Example](https://codesandbox.io/s/hotkeys-116-8rge8) ```js import React from 'react'; import Hotkeys from 'react-hot-keys'; export default class HotkeysDemo extends React.Component { constructor(props) { super(props); this.state = { output: 'Hello, I am a component that listens to keydown and keyup of a', } } onKeyUp(keyName, e, handle) { console.log("test:onKeyUp", e, handle) this.setState({ output: `onKeyUp ${keyName}`, }); } onKeyDown(keyName, e, handle) { console.log("test:onKeyDown", keyName, e, handle) this.setState({ output: `onKeyDown ${keyName}`, }); } render() { return (
{this.state.output}
) } } ``` ### Functional Component Example ```js import React, { useState } from 'react'; import Hotkeys from 'react-hot-keys'; export default function HotkeysDemo() { const [output, setOutput] = useState('Hello, I am a functional component that listens to keydown and keyup'); const onKeyUp = (keyName, e, handle) => { console.log("test:onKeyUp", e, handle); setOutput(`onKeyUp ${keyName}`); }; const onKeyDown = (keyName, e, handle) => { console.log("test:onKeyDown", keyName, e, handle); setOutput(`onKeyDown ${keyName}`); }; return (
{output}
); } ``` ### With useRef Example ```js import React, { useState, useRef } from 'react'; import Hotkeys from 'react-hot-keys'; export default function HotkeysWithRef() { const [output, setOutput] = useState('Press shift+a or alt+s to test'); const hotkeysRef = useRef(null); const onKeyDown = (keyName, e, handle) => { console.log("onKeyDown", keyName, e, handle); console.log("Current isKeyDown state:", hotkeysRef.current?.isKeyDown); setOutput(`Key pressed: ${keyName}`); }; const onKeyUp = (keyName, e, handle) => { console.log("onKeyUp", keyName, e, handle); console.log("Current isKeyDown state:", hotkeysRef.current?.isKeyDown); setOutput(`Key released: ${keyName}`); }; return (

{output}

Try pressing and holding shift+a or alt+s

 ); } ``` ## API ### keyName Supported keys `⇧`, `shift`, `option`, `⌥`, `alt`, `ctrl`, `control`, `command`, `⌘` . `⌘` Command() `⌃` Control `⌥` Option(alt) `⇧` Shift `⇪` Caps Lock ~~`fn` Function key is `fn` (not supported)~~ `↩︎` return/enter `space` space keys ### onKeyDown Callback function to be called when user pressed the target buttons `space` space keys ### onKeyUp Callback function to be called when user key uped the target buttons ### allowRepeat > allowRepeat?: boolean; `allowRepeat` to allow auto repeating key down ### disabled > disabled?: boolean; Disable `onKeyDown` and `onKeyUp` events. Default: `undefined` ### filter `INPUT` `SELECT` `TEXTAREA` default does not handle. `filter` to return to the true shortcut keys set to play a role, flase shortcut keys set up failure. ```diff { + return true; + }} onKeyDown={this.onKeyDown.bind(this)} onKeyUp={this.onKeyUp.bind(this)} /> ``` ## Contributors As always, thanks to our amazing contributors! Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors). ## License Licensed under the MIT License. --- _Source: https://npm.io/package/react-hot-keys · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._