portal-www/src/hooks/use-keydown.ts

Nova Portal Website. Based on Next starter by Ueno

import * as React from 'react';

/**
 * Custom hooks that return the keys that are pressed on the keyboard
 */
export const useKeyDown = () => {
  const [keys, setKeys] = React.useState<string[]>([]);

  const handleKeyDown = ({ key }: KeyboardEvent) => {
    if (keys.includes(key)) {
      return;
    }

    setKeys([...keys, key]);
  };

  const handleKeyUp = ({ key }: KeyboardEvent) => {
    const d = keys.indexOf(key, 0);

    setKeys([...keys.slice(0, d), ...keys.slice(d + 1)]);
  };

  React.useEffect(() => {
    document.addEventListener('keydown', handleKeyDown, false);
    document.addEventListener('keyup', handleKeyUp, false);

    return () => {
      document.removeEventListener('keydown', handleKeyDown, false);
      document.removeEventListener('keyup', handleKeyUp, false);
    };
  }, [keys]);

  return keys;
};