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