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

1 vote325 views1 answer
React setup for handling UI.
Javascript React
18 votes277 views3 answers
Add object to array react hook
Javascript React
11 votes369 views4 answers
React native text underline
Javascript React
11 votes322 views2 answers
React router refreshes page
Javascript React
0 vote325 views2 answers
How to convert time to users timezone in react
Javascript React
6 votes272 views2 answers
React native socket io
Javascript React
0 vote314 views1 answer
Standalone form inside reactive form
Javascript React
0 vote308 views2 answers
Hosting react on gh pages
Javascript React
15 votes291 views3 answers
React native expo navigation
Javascript React
6 votes352 views3 answers
Apply required attribute on input using ternary operator using react js
Javascript React