CODEWITHSUNDEEP
reactjskeyboard-eventsonkeypress
Green_Sand
Green_Sand

Reputation: 33

React onkeypress event to run a function

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.

Upvotes: 3

Views: 13018

Answers (2)

A.Anvarbekov
A.Anvarbekov

Reputation: 1469

useEffect(() => {
 window.addEventListener('keydown', e => {
  if(e.key === 'Enter'){ // See key codes https://keycode.info
   console.log('You pressed Enter')
  }
 })
},[])

EDIT

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)
},[])

Upvotes: 5

Dinesh
Dinesh

Reputation: 162

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

}

Upvotes: 1

Related Questions