React Project

Keyboard Shortcut Library

This library needs to support the following functionalities -
Allow any component to bind/unbind shortcuts
Any component can provide a key combination and a callback to be triggered when the key is pressed - (for eg. Ctrl + A changes the background colour of componentA)
The library needs to keep track of the active shortcuts and should provide a way to retrieve the list of shortcuts which are currently active - this could be used to show a help page of sorts (the library only needs to provide the data - the user can decide where to show the legend)

Things you should know -

To do the actual handling of the keyboard, use the functionality from Keypress.js(https://dmauro.github.io/Keypress/). Do not rewrite the logic to listen to keypress and emit the actions in your library.
You should use React JS.

Example -

See the short video attached
Assume your library is now used to build a sample screen with multiple components. Each component has its own keyboard shortcuts/callback.

e.g. ‘Shift A’ toggles component A colour to another colour (randomised).

Approach Expected -

To build a wrapper around keypress -

What parts of keypress do we need to use?
How to provide the interface for the user to give a shortcut, callback and the description?
How to populate the list of active shortcuts?

1. What parts of keypress do we need to use?

Create a single listener of keypress.js
Use the simple_combo interface provided by keypress
Store the object returned during registration to deregister the shortcut at a later point in time along with the description.
Use internal ids to deregister specific instances.

2. How to provide the interface for the user to give in the shortcut, callback and the description?

Create a new keyboard shortcut component that takes in a shortcut description, key combo and a callback function as props, incase of multiple shortcuts per component repeat the use of keyboard shortcut components

return (
…
<KeyboardShortcut combo=”shift a” callback={() => turnSomeColor()} description=”Turns to some colour” />
<KeyboardShortcut combo=”shift b” callback={() => turnSomeOtherColor()} description=”Turns to some other colour” />

…
)
Creating a shortcut as a component will help the library handle bind and unbind operations on mount and unmount. Users see a simple API.

To get the list of active shortcuts create a higher order component that gives the list of active shortcuts and their description.


3. How to populate the list of active shortcuts?

To maintain a global state use React Context.