React useKeyPress hook

React, Hooks, State, Effect, Event · Sep 7, 2021

Listens for changes in the pressed state of a given key.

  • Use the useState() hook to create a state variable that holds the pressed state of the given key.
  • Define two handler functions that update the state variable on key down or key up accordingly.
  • Use the useEffect() hook and EventTarget.addEventListener() to handle the 'keydown' and 'keyup' events.
  • Use EventTarget.removeEventListener() to perform cleanup after the component is unmounted.
const useKeyPress = targetKey => {
  const [keyPressed, setKeyPressed] = React.useState(false);

  const downHandler = ({ key }) => {
    if (key === targetKey) setKeyPressed(true);
  };

  const upHandler = ({ key }) => {
    if (key === targetKey) setKeyPressed(false);
  };

  React.useEffect(() => {
    window.addEventListener('keydown', downHandler);
    window.addEventListener('keyup', upHandler);

    return () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
    };
  }, []);

  return keyPressed;
};
const MyApp = () => {
  const wPressed = useKeyPress('w');

  return <p>The "w" key is {!wPressed ? 'not ' : ''}pressed!</p>;
};

ReactDOM.render(<MyApp />, document.getElementById('root'));

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this