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 event on your root component
KWhy is using outdated/not a good solution?
Mi also recommend doing the onKeyPress.
document can work too, but if it's in the , make sure you do a
document can work too, but if it's in the , make sure you do a
return
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>