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 vote311 views1 answer
Toggle boolean state react
Javascript React
0 vote331 views1 answer
Test one function in react class
Javascript React
11 votes347 views2 answers
How to add react icons using npm
Javascript React
86 votes352 views3 answers
React check if window exists
Javascript React
26 votes355 views6 answers
React js
Javascript React
1 vote312 views4 answers
React native push notifications npm
Javascript React
1 vote307 views1 answer
How to define state in react function
Javascript React
0 vote351 views1 answer
Reactjs typeError: Cannot read property 'offsetHeight' of null
Javascript React
0 vote324 views1 answer
Font family react
Javascript React
0 vote329 views1 answer
React testing library for hooks
Javascript React