Skip the library and roll your own hot keys

While working on a React app, I needed to hide a component when a user pressed the escape key.

A quick google search for “react custom hot keys” recommended a library called react-hotkeys.

Unfortunately it hadn’t been maintained in almost a year (as of 2020/11/17).

So I took advice straight from Droogan’s “Unmaintainable Code” and rolled my own.

Here’s how I did it.

Add an event listener

Upon the component being displayed, I added an event listener on the keyup event. This fires when any key is pressed.

window.addEventListener(
    'keyup',
    hideDisplay
)

_hideDisplay__ is a function we’ll write in a minute._

#javascript #programming #react #web-development #developer