Keyboard shortcuts are a bit tricky to manage in web applications.
consider a Widget
component.
I want to be able to focus certain elements, and run functions on this component, based on keyboard shorcuts.
class Widget extends React.Component {
componentDidMount() {
this.setBindings()
},
componentWillUnmount() {
this.removeBindings();
}
}
setBindings and removeBindings, would use a library like mousetrap to bind specific keyboard shortcuts
Now, there's two problems with the above solution:
Widget
. This destroy's the 'granularity' of the code -- ideally a user should be able to use Widget, then WidgetWithShortcuts, or something like thisAnother potential solution, is to pass an instance
const widgetShortcuts = (widgetInstance) => {
return {
'ctrl i': () => widgetInstance.focusInput(),
}
}
The problem with the second solution is:
widgetInstance will have to expose a lot of publicly accessible methods, like focusSomeThing, or invokeProp, etc
if Widget
wants to have some tooltip, that shows the keyboard shortcuts at certain places, the info about the keyboard shorcuts will be duplicated in different places. It will become possible to change the shortcuts in one place, and forget to do so in another places
Is there a best practice, or some ideas on how keyboard shortcuts can be implemented with solutions to the problems above?
Simply replace the console. log by the action you want on key press and you'll have a fully functioning keyboard shortcut in your app.
To assign a keyboard shortcut do the following: Begin keyboard shortcuts with CTRL or a function key. In the Press new shortcut key box, press the combination of keys that you want to assign. For example, press CTRL plus the key that you want to use.
The onKeyPress event in ReactJS occurs when the user presses a key on the keyboard but it is not fired for all keys e.g. ALT, CTRL, SHIFT, ESC in all browsers. To use the onKeyPress event in ReactJS we will use the predefined onKeyPress method.
Alternatively referred to as Control+S, ^s, and C-s, Ctrl+S is a keyboard shortcut most often used to save changes to a file. Tip. On Apple computers, the keyboard shortcut used to save is Command + S .
React-hotkeys is not a method, but a tool that sounds like it would solve the problem you're facing.
<HotKeys>
component that has the hotkeys attached to it. keymap
& handler
One issue I'm facing with this plugin is that there doesn't seem to be a way to keep hotkeys from firing when typing in an input field, but other than that it seems to work pretty great.
I think your best bet is setup your keyboard shortcut listener once at the top level and pass down info to components who may or may not care that a shortcut happened. This solves problem 1 where you may bind listeners more than once, and this also precludes the need to expose any component functions.
class ShortcutProvider extends Component {
state = { shortcut: null }
componentDidMount() {
// shortcut library listener
onShortcut(shortcut => this.setState({ shortcut })
}
render() {
<App shortcut={this.state.shortcut} />
}
}
Then your widget can react (or not react) to the prop changes:
class Widget extends Component {
...
componentWillReceiveProps(nextProps) {
if (this.state.shouldReactToShortcut) {
if (nextProps.shortcut === 'ctrl i') {
// do something
}
}
}
...
}
If you're passing the shortcut prop down many components it may be worth it to put the shortcut state into context.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With