REACT

useKeyPress Hook

A custom React Hook to detect keyboard key presses with TypeScript support

ReactHooksKeyboardEventsUI

Code

import { useState, useEffect } from 'react';

function useKeyPress(targetKey: string | string[]): boolean {
  const [keyPressed, setKeyPressed] = useState(false);
  const targetKeys = Array.isArray(targetKey) ? targetKey : [targetKey];

  const downHandler = ({ key }: KeyboardEvent) => {
    __TOKEN_19__ (targetKeys.includes(key)) setKeyPressed(true);
  };

  const upHandler = ({ key }: KeyboardEvent) => {
    __TOKEN_21__ (targetKeys.includes(key)) setKeyPressed(false);
  };

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

    __TOKEN_22__ () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
      window.removeEventListener('blur', () => setKeyPressed(false));
    };
  }, [targetKeys]);

  return keyPressed;
}

// Usage example
// const isEscapePressed = useKeyPress('Escape');
// const isCtrlSPressed = useKeyPress(['Control', 's']);
// useEffect(() => {
//   if (isEscapePressed) setIsModalOpen(false);
// }, [isEscapePressed]);