react-shortcuts

import React from 'react'; import PropTypes from 'prop-types'; import { ShortcutManager, Shortcuts } from 'react-shortcuts'; const keymap = { TODO_ITEM: { MOVE_LEFT: 'left', MOVE_RIGHT: 'right', MOVE_UP: ['up', 'w'], DELETE: { osx: ['command+backspace', 'k'], windows: 'delete', linux: 'delete', other: 'delete' } } }; const shortcutManager = new ShortcutManager(keymap); class App extends React.Component { getChildContext() { return { shortcuts: shortcutManager }; } render() { return ( <div> <h1>React Shortcuts Demo</h1> <TodoItem /> </div> ); } } App.childContextTypes = { shortcuts: PropTypes.object.isRequired }; class TodoItem extends React.Component { _handleShortcuts = (action, event) => { switch (action) { case 'MOVE_LEFT': console.log('Moving left!'); break; case 'MOVE_RIGHT': console.log('Moving right!'); break; case 'MOVE_UP': console.log('Moving up!'); break; case 'DELETE': console.log('Deleting item!'); break; default: console.log(`Unhandled action: ${action}`); } event.preventDefault(); // Prevent default browser behavior }; render() { return ( <Shortcuts name='TODO_ITEM' handler={this._handleShortcuts}> <div style={{ padding: '20px', border: '1px solid #ccc', margin: '10px' }}> <h3>My Todo Item</h3> <p>Try pressing 'left', 'right', 'up', or 'command+backspace' (macOS) / 'delete' (Windows/Linux).</p> <p>Focus this area to activate shortcuts.</p> <input type="text" placeholder="Type here, shortcuts should be ignored" /> </div> </Shortcuts> ); } } export default App;