A custom #ReactJS hook that listens for changes in the state of any key.

useKeyDown.ts

import { useState, KeyboardEvent } from 'react';
import useEventListener from '@use-it/event-listener';

export const useKeyDown = (key: string) => {
  const [keyDown, setKeyDown] = useState(false);

  useEventListener('keydown', (ev: KeyboardEvent) => {
    if (ev.key === key) {
      setKeyDown(true);
    }
  });
  useEventListener('keyup', (ev: KeyboardEvent) => {
    if (ev.key === key) {
      setKeyDown(false);
    }
  });

  return keyDown;
};