Fix messy React Shortcuts once and for all
Remember the last time when your friend was showing you around the place you didn’t know? It was late and all you wanted was to be back at the ho(s)tel. When suddenly your friend suggested that he “knows a shortcut”. You were like “why not” and you guys ended up lost… I’m sure you remember.
Well, something quite similar can happen when you mess up your keymap.
Don’t send your friends (and users) the wrong direction
Another story: your user wants to copy a piece of a previewed text and can’t wait to hit the ctrl/cmd+c. The problem arises when your user wants to use this general shortcut for multiple actions: copying an image, a bit of code, a line of text — all from different areas.
In other words:
- You can’t easily tell which shortcut is bound to which component.
- You have to write a lot of boilerplate code (addEventListeners, removeEventListeners, …).
- Memory leaks are a real problem if components don’t remove their listeners properly.
- Platform specific shortcuts is another headache.
- It’s more difficult to implement feature like user-defined shortcuts.
- You can’t easily get all the application shortcuts and display it (e.g. in settings).
We got your back
When were were rewriting Avocode codebase from Atom to Electron we needed a custom keymap which would be cool with React. Inspired by Atom Keymap we wrote our own keymap version that works like a charm.
Please, do yourself a favour
You’re guessing right: With react-shortcuts you can declaratively manage shortcuts for each one of all your React components. Bind multiple functions to the same key so once the user clicks in the given div area an appropriate shortcut will be enabled.
This will not only save you precious time but also enable your users to set up shortcuts on their own.
Feel free to get it on GitHub
Let me know how this library works for you in the comments down below or on GitHub. Thank you.
This article was originally published here.