{"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).","language":"javascript","status":"abandoned","last_verified":"Tue Apr 21","install":{"commands":["npm install react-shortcuts"],"cli":null},"imports":["import { ShortcutManager } from 'react-shortcuts'","import { Shortcuts } from 'react-shortcuts'"],"auth":{"required":false,"env_vars":[]},"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      <div>\n        <h1>React Shortcuts Demo</h1>\n        <TodoItem />\n      </div>\n    );\n  }\n}\n\nApp.childContextTypes = {\n  shortcuts: PropTypes.object.isRequired\n};\n\nclass TodoItem extends React.Component {\n  _handleShortcuts = (action, event) => {\n    switch (action) {\n      case 'MOVE_LEFT':\n        console.log('Moving left!');\n        break;\n      case 'MOVE_RIGHT':\n        console.log('Moving right!');\n        break;\n      case 'MOVE_UP':\n        console.log('Moving up!');\n        break;\n      case 'DELETE':\n        console.log('Deleting item!');\n        break;\n      default:\n        console.log(`Unhandled action: ${action}`);\n    }\n    event.preventDefault(); // Prevent default browser behavior\n  };\n\n  render() {\n    return (\n      <Shortcuts name='TODO_ITEM' handler={this._handleShortcuts}>\n        <div style={{ padding: '20px', border: '1px solid #ccc', margin: '10px' }}>\n          <h3>My Todo Item</h3>\n          <p>Try pressing 'left', 'right', 'up', or 'command+backspace' (macOS) / 'delete' (Windows/Linux).</p>\n          <p>Focus this area to activate shortcuts.</p>\n          <input type=\"text\" placeholder=\"Type here, shortcuts should be ignored\" />\n        </div>\n      </Shortcuts>\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 `<Shortcuts>` component. It shows basic shortcut actions and platform-specific keybindings.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}