/react_keyboard

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

React Keyboard

React + Typescript cheat sheet

Make the App a class component with pressedKey in the state.

Here is the working version

  • before any key was pressed show the Nothing was pressed yet message;
  • when a key is pressed show a The last pressed key is [key] message;
  • use componentDidMount to add keyup handler:
    // DON'T import KeyboardEvent from React, because it is a regular event
    document.addEventListener('keyup', (event: KeyboardEvent) => {
      console.log(event.key);
    });
  • use removeEventListener to remove a global handler in componentWillUnmount.

Instructions