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 vote192 views1 answer
React Update a label when rate moves "quietly"
Javascript React
0 vote192 views1 answer
React Readonly rating
Javascript React
1 vote246 views1 answer
Android resource linking failed react native image crop picker
Javascript React
0 vote194 views1 answer
Npm i react-router semantic-ui-react semantic-ui-css
Javascript React
0 vote186 views1 answer
Can't bookmark react router
Javascript React
0 vote228 views2 answers
Airbnb and eslint react native
Javascript React
16 votes212 views3 answers
Importing svg into react
Javascript React
12 votes205 views2 answers
React native flatlist container style
Javascript React
0 vote206 views1 answer
What is react headroom
Javascript React
1 vote149 views1 answer
Parent to child react state
Javascript React