Keyboard shortcuts in React, and how they help the annotation team

Cogito’s Annotation Team has been requesting keyboard shortcuts for some time to help improve the efficiency of their workflows, and we have just added them to our Annotation Tool. This article walks you through the process of adding keyboard shortcuts to a React application, and explains how they will help annotators in the new version of the tool. We use the react-hotkeys library, which we refer to in the post below.

Shortcuts in the Annotation Tool

First, let’s take a look at how shortcuts work in the Annotation Tool.

Keyboard shortcuts in the Cogito Annotation Tool

Meeting with the annotation team

Before adding shortcuts to the Annotation Tool, we had to find out what features the Annotation Team wanted. We set up a meeting with the whole team, giving annotators the opportunity to voice any issues they had with the current workflows in the Annotation Tool.

  • Skipping back and forth
  • An easier way to create and modify intervals on the audio player

Adding shortcuts to your own app

Now that we’ve seen how keyboard shortcuts are used within the Annotation Tool, let’s take a look at how they can be added to your own React application.

Installation

Assuming you already have a React application, all you need to install is react-hotkeys.

npm install react-hotkeys --save

Using react-hotkeys

react-hotkeys provides several components that are useful for implementing keyboard shortcuts into your React app.

  • The HotKeys component only triggers actions with key events that happen in one of their descendants.

keyMaps and handlers

In order to use either of these components, you must pass them both a keyMap and a handlers prop.

Preventing default behavior

Some key combinations already have default behavior assigned to them by the browser. For example, pressing `”space”` scrolls down a page, and `”Control+p”` prints the page. If we want to prevent this default behavior from occurring, we can use this function to intercept the event before it gets handled, and prevent the default handler from being activated.

Dynamic shortcuts

In order to change shortcuts dynamically, we need several things:

  • A way to store the shortcuts so they persist between sessions

UI for changing shortcuts

For the UI, we use Material-UI to style the table, but you can use any other framework as well, or do your own custom styling. If you want to use Material-UI, it can be installed like this:

npm install @material-ui/core
Change shortcuts dialog
Changing shortcut dialog
Edit shortcuts button
Shortcuts popover

Storing the shortcuts

How the shortcuts are stored and retrieved largely depends on your database implementation, but we can go over some generic details here.

Putting it all together

Once we have our keyMap stored in the database, all that’s left to do is add GlobalHotKeys components wherever handlers are defined. The `allowChanges` prop allows the keyMap and handlers to be changed dynamically.

Opportunities at Cogito

If you are based in the US or Ireland and are interested in opportunities at Cogito, please check out our careers page! We have an office optional policy that encourages remote work and collaboration!

Acknowledgements

This article was written by Ben Knower during his internship at Cogito — while being mentored by Jacob Duyon. Thanks also to Richard Brutti and Matthew Roddy for the detailed proofreading and feedback.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store