React key press hook

// Hook
function useKeyPress(targetKey) {
  // State for keeping track of whether key is pressed
  const [keyPressed, setKeyPressed] = useState<boolean>(false);
  // If pressed key is our target key then set to true
  function downHandler({ key }) {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  }
  // If released key is our target key then set to false
  const upHandler = ({ key }) => {
    if (key === targetKey) {
      setKeyPressed(false);
    }
  };
  // Add event listeners
  useEffect(() => {
    window.addEventListener("keydown", downHandler);
    window.addEventListener("keyup", upHandler);
    // Remove event listeners on cleanup
    return () => {
      window.removeEventListener("keydown", downHandler);
      window.removeEventListener("keyup", upHandler);
    };
  }, []); // Empty array ensures that effect is only run on mount and unmount
  return keyPressed;
}

Source: usehooks.com

Similar codes

0 vote344 views1 answer
React native charts style gradiant
Javascript React
1 vote351 views2 answers
Reset form input react
Javascript React
2 votes348 views1 answer
React native cover image in parent view
Javascript React
-2 votes351 views1 answer
Starter react redux project
Javascript React
0 vote408 views1 answer
Setstate to false after 10 sec react native
Javascript React
1 vote343 views1 answer
How to use react memo hooks
Javascript React
157 votes551 views6 answers
Create new react app
Javascript React
63 votes338 views3 answers
Concat two arrays in react
Javascript React
3 votes350 views1 answer
Navigation react pass props
Javascript React
0 vote351 views1 answer
How to pass parent function to child screen in React Navigation
Javascript React