ideas

ideas copied to clipboard

A hook to listen to keypress events at the window level.

Example, a simple key logger :

function MyComponent() {
  const [keys, setKeys] = useState([]);

  function onKeyPress({ key }) {
    setKeys(keys => [key, ...keys]);
  }

  useKeyPress(onKeyPress);

  return (
    <div>
      <h3>Last keys pressed</h3>
      <ul>
        {keys.map(key => (
          <li>{key}</li>
        ))}
      </ul>
    </div>
  );
}

And the result :

Repo : https://github.com/lucleray/keypress