How to handle key press events in React?
Anyone have good resources for how to handle a key left or right event in React? I see a lot of outdated or not optimal solutions that use document.
K
KYou could possibly put an
onKeyPress event on your root componentKWhy is using
document outdated/not a good solution?
Mi also recommend doing the onKeyPress.
document can work too, but if it's in the
document can work too, but if it's in the
useEffect, make sure you do a return clean up on the listener
SI saw issue with it because it goes out of the v-dom, instead of using useRef
SGitHub
React hook for using keyboard shortcuts in components. - GitHub - JohannesKlauss/react-hotkeys-hook: React hook for using keyboard shortcuts in components.
LKeep it simple:
<div onKeyDown={(e)=>{
if (e.key === „ArrowRight“) doThat()
if (e.key === „ArrowLeft“) doThis()
}}>
…..
</div>
<div onKeyDown={(e)=>{
if (e.key === „ArrowRight“) doThat()
if (e.key === „ArrowLeft“) doThis()
}}>
…..
</div>