I'm new at react & coding. I want to run a function if space & up arrow pressed. i want to run my jump() function
const jump = () => {
if (onJump == false){
$("#dino").animate({top:'-=60%'}, 300);
$("#dino").animate({top:'+=60%'}, 300);
onJump=true;
setTimeout(function() {
onJump=false;
},600)
}
}
i already try several codes but none of them are working.
useEffect(() => {
window.addEventListener('keydown', e => {
if(e.key === 'Enter'){ // See key codes https://keycode.info
console.log('You pressed Enter')
}
})
},[])
the best practice for performance is to remove the event listener on un-mount:
useEffect(() => {
const onKeyDown = (e) => {
if(e.key === 'Enter'){
console.log('You pressed Enter')
}
}
window.addEventListener('keydown', onKeyDown)
return () => window.removeEventListener('keydown', onKeyDown)
},[])
useEffect(() => { window.addEventListener(...) }, [])If you don't need to focus on any element and want to listen to keyboard events, you need to add listener to the window object. Here is the solution for spacebar key be pressed down and key up event of up key
import React, { useRef } from 'react';
function KeyUpHandler() {
const keysPressedDown = useRef({});
useEffect(() => {
window.addEventListener("keydown",
(event) => {
// space
if (event.keyCode == 32) {
keysPressedDown.current[event.keyCode] = true;
}
// up
if (event.keyCode == 38) {
keysPressedDown.current[event.keyCode] = true;
}
}, false);
window.addEventListener("keyup",
event => {
// space
if (event.keyCode == 32) {
keysPressedDown.current[event.keyCode] = false;
}
if (keysPressedDown.current[32] && event.keyCode == 38 &&
keysPressedDown.current[38]) {
// call your function here
console.log(' space and up ');
}
// up
if (event.keyCode == 38) {
keysPressedDown.current[event.keyCode] = false;
}
}, false);
}, []);
return <></>
}
