{"id":26157,"library":"react-hotkeys-hook","title":"react-hotkeys-hook","description":"A React hook for declaratively handling keyboard shortcuts in components. Current stable version is 5.3.0, released with monthly cadence. It ships TypeScript definitions, supports scopes to prevent hotkey collisions, focus traps, and enables/disables scopes via context. Unlike alternatives like react-hotkeys (maintenance mode) or mousetrap (no React hook), this library is React-first with a simple hook API. Requires React >= 16.8.0. Bundle size is minimal (~2KB gzipped). ESM and CJS exports available.","status":"active","version":"5.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/JohannesKlauss/react-keymap-hook","tags":["javascript","react","hook","hooks","component","hotkey","shortcut","keyboard","shortcuts","typescript"],"install":[{"cmd":"npm install react-hotkeys-hook","lang":"bash","label":"npm"},{"cmd":"yarn add react-hotkeys-hook","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-hotkeys-hook","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React hooks","package":"react","optional":false},{"reason":"Peer dependency for React DOM bindings","package":"react-dom","optional":false}],"imports":[{"note":"Default export does not exist; must use named import.","wrong":"import useHotkeys from 'react-hotkeys-hook'","symbol":"useHotkeys","correct":"import { useHotkeys } from 'react-hotkeys-hook'"},{"note":"CommonJS require works but TypeScript users should use ESM import.","wrong":"const { useHotkeysContext } = require('react-hotkeys-hook')","symbol":"useHotkeysContext","correct":"import { useHotkeysContext } from 'react-hotkeys-hook'"},{"note":"No subpath exports; all exported from top-level package.","wrong":"import { HotkeysProvider } from 'react-hotkeys-hook/hotkeys-provider'","symbol":"HotkeysProvider","correct":"import { HotkeysProvider } from 'react-hotkeys-hook'"},{"note":"Added in v5.2.3; checks if a given key is currently pressed.","symbol":"isHotkeyPressed","correct":"import { isHotkeyPressed } from 'react-hotkeys-hook'"},{"note":"Use type import in TypeScript for runtime-less export.","wrong":"import { Options } from 'react-hotkeys-hook'","symbol":"Options type","correct":"import type { Options } from 'react-hotkeys-hook'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nconst Example = () => {\n  const [count, setCount] = useState(0);\n  useHotkeys('ctrl+k', () => setCount(c => c + 1), { scopes: ['global'] }, [count]);\n  return <p>Pressed {count} times.</p>;\n};\n\nexport default Example;","lang":"typescript","description":"Basic example using useHotkeys with a scope dependency array. Shows increment on Ctrl+K press."},"warnings":[{"fix":"Rename enabledScopes prop to activeScopes. For custom key mappings, use key codes (e.g., 'KeyK' instead of 'k').","message":"v5.0.0: Renamed enabledScopes to activeScopes in HotkeysProvider. Also now listens to key code instead of key, which may break custom key mappings.","severity":"breaking","affected_versions":">=5.0.0 <5.0.0"},{"fix":"Use '+' exclusively to combine keys. For chord sequences, use array syntax.","message":"v5.0.0: Delimiter changed from custom to always '+'. Previously custom delimiters were allowed.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update options to use new property names as per v5 migration guide.","message":"v4.x: Options object keyOrder is deprecated; use orderByKeys or custom sort.","severity":"deprecated","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Pass { enabled: true } or { scopes: ['global'] } to listen globally.","message":"useHotkeys callback will not fire if the component is not focused unless global option is true.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Pass deps array as third argument or use functional state updates.","message":"The dependency array in useHotkeys must be explicitly passed for reactivity; otherwise stale closures may occur.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Rename 'enabledScopes' to 'activeScopes' in HotkeysProvider.","cause":"Using v5 code with v4 API (enabledScopes renamed).","error":"TypeError: Cannot read properties of undefined (reading 'enabledScopes')"},{"fix":"Wrap your app with <HotkeysProvider> or avoid using context outside it.","cause":"Using useHotkeysContext but component tree lacks <HotkeysProvider>.","error":"Uncaught Error: useHotkeysContext must be used within a HotkeysProvider"},{"fix":"Always call useHotkeys unconditionally; use scopes or enabled option for conditional behavior.","cause":"Conditional call of useHotkeys inside a component.","error":"Warning: React has detected a change in the order of Hooks called by ExampleComponent"},{"fix":"Use 'Meta+k' for Cmd key, or 'Control+k' for Ctrl. 'mod' is an alias but not documented.","cause":"v5 uses key code 'KeyK' but 'mod' may still work; however, 'mod' is not a valid key.","error":"Hotkey 'mod+k' not triggering on macOS"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}