Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Code
·
LAST UPDATED
August 3, 2016

Fix messy React Shortcuts once and for all

Head of Product & Co-founder at Avocode and a former Lead Product Developer and Co-founder at MadebySource.

"I still write code. In fact that's what I love doing most."

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 switching 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.

Click into the div area bellow to get the React Shortcuts

Give us some love and upvote our library on GitHub with a star. Thank you!

Let us know how this library works for you in the comments down below.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: