{"id":15792,"library":"react-shortcuts","title":"Declarative Keyboard Shortcuts for React","description":"React Shortcuts (version 2.1.0) is a library designed to manage keyboard shortcuts declaratively within React components. It provides a structured way to define application-wide and component-specific keymaps, which can include platform-specific variations and sequences. The library uses `mousetrap` (Combokeys) under the hood for robust key detection. Key differentiators include centralizing shortcut definitions and abstracting away boilerplate `addEventListener`/`removeEventListener` logic. However, the package is effectively abandoned, with its last release over 7 years ago and no recent development activity. It relies heavily on React's now-deprecated Legacy Context API (`getChildContext`), making it incompatible with modern React versions (17 and above).","status":"abandoned","version":"2.1.0","language":"javascript","source_language":"en","source_url":"git://github.com/avocode/react-shortcuts","tags":["javascript","react","react-component","keyboard","shortcuts","mousetrap"],"install":[{"cmd":"npm install react-shortcuts","lang":"bash","label":"npm"},{"cmd":"yarn add react-shortcuts","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-shortcuts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for React component functionality. Supports React versions ^0.14.8, ^15, or ^16.","package":"react","optional":false},{"reason":"Peer dependency, required for rendering React components. Supports React versions ^0.14.8, ^15, or ^16.","package":"react-dom","optional":false},{"reason":"Internal dependency for low-level keyboard event handling and shortcut parsing (Combokeys).","package":"mousetrap","optional":false},{"reason":"Peer dependency for `childContextTypes` validation in older React versions. Explicitly mentioned in React docs for v15.5+ when `React.PropTypes` moved.","package":"prop-types","optional":false}],"imports":[{"note":"Used to initialize the keymap and manage shortcut instances. Typically instantiated once per application.","wrong":"const ShortcutManager = require('react-shortcuts').ShortcutManager","symbol":"ShortcutManager","correct":"import { ShortcutManager } from 'react-shortcuts'"},{"note":"The React component used to wrap parts of your UI that should respond to specific shortcuts defined in the keymap.","wrong":"const Shortcuts = require('react-shortcuts').Shortcuts","symbol":"Shortcuts","correct":"import { Shortcuts } from 'react-shortcuts'"}],"quickstart":{"code":"import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ShortcutManager, Shortcuts } from 'react-shortcuts';\n\nconst keymap = {\n TODO_ITEM: {\n MOVE_LEFT: 'left',\n MOVE_RIGHT: 'right',\n MOVE_UP: ['up', 'w'],\n DELETE: {\n osx: ['command+backspace', 'k'],\n windows: 'delete',\n linux: 'delete',\n other: 'delete'\n }\n }\n};\n\nconst shortcutManager = new ShortcutManager(keymap);\n\nclass App extends React.Component {\n getChildContext() {\n return { shortcuts: shortcutManager };\n }\n\n render() {\n return (\n
\n \n );\n }\n}\n\nexport default App;\n","lang":"javascript","description":"This quickstart demonstrates defining a keymap, creating a ShortcutManager, providing it via `getChildContext` in a parent component, and consuming shortcuts in a child component using the `` component. It shows basic shortcut actions and platform-specific keybindings."},"warnings":[{"fix":"There is no direct fix for this library to work with modern React without significant re-architecture. Consider migrating to a modern keyboard shortcut library that uses the new Context API or React Hooks, such as `react-hotkeys-hook` or `@keybindy/react`.","message":"The library fundamentally relies on React's Legacy Context API (`getChildContext` and `childContextTypes`), which has been deprecated since React 16.3 and is removed entirely in React 19. Attempting to use this library with React 17+ will likely result in warnings or runtime errors related to this API.","severity":"breaking","affected_versions":">=2.1.0"},{"fix":"Upgrade to a modern keyboard shortcut library compatible with your React version, or pin your project to an older React version (e.g., React 16) which is generally not recommended for new development.","message":"The package's `peerDependencies` (`react` and `react-dom`) are explicitly limited to versions up to `^16`. Using it with React 17 or higher will lead to `npm` or `yarn` peer dependency warnings or installation failures, and likely runtime issues due to the reliance on removed React APIs.","severity":"breaking","affected_versions":">=2.1.0"},{"fix":"Avoid using this library for new projects. For existing projects, plan for migration to an actively maintained alternative.","message":"The `react-shortcuts` package is abandoned, with the last release over 7 years ago and no recent activity on its GitHub repository. This means there will be no future updates, bug fixes, security patches, or compatibility improvements for newer React versions or browser changes.","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"Thoroughly test shortcut interactions across your application, particularly when multiple components might capture the same keys or when integrating with other keyboard-event-driven features. Consider using `stopPropagation` and `preventDefault` as needed within your handlers.","message":"The underlying `mousetrap` library often attaches global keyboard listeners. While `react-shortcuts` attempts to scope shortcuts to components, global listeners can still lead to conflicts with other libraries or unintended behaviors if not carefully managed, especially with the `global` prop on the `` component.","severity":"gotcha","affected_versions":">=2.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure that a parent component (`App` in the quickstart) implements both `getChildContext` to return the `shortcutManager` and `childContextTypes` to declare its type (`PropTypes.object.isRequired`). Verify that your React version is compatible (React 16 or earlier).","cause":"This error occurs when a `` component attempts to access the `shortcuts` object from the React context, but a parent component has not properly provided it using the legacy `getChildContext` and `childContextTypes` pattern, or the context mechanism has broken due to React version incompatibility.","error":"TypeError: Cannot read properties of undefined (reading 'shortcuts')"},{"fix":"This warning signals fundamental incompatibility with modern React. The primary 'fix' is to migrate away from `react-shortcuts` to a modern library that does not use the Legacy Context API.","cause":"This is a warning from React itself, indicating that your application is using the deprecated `getChildContext` or `childContextTypes` APIs, which `react-shortcuts` relies upon.","error":"Warning: Legacy context API has been detected. These APIs are no longer supported in React 19+."},{"fix":"Verify that `import { Shortcuts } from 'react-shortcuts'` is correct and that the `react-shortcuts` package is installed and accessible in your environment. Check for any build or bundling issues that might prevent the component from being resolved.","cause":"This error typically indicates that the `Shortcuts` component was not imported correctly or that `react-shortcuts` failed to initialize properly, leading to `Shortcuts` being `undefined` when React tries to render it.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."}],"ecosystem":"npm"}