Detect Keyboard Key Presses with useKeyPress Hook

import { useState, useEffect } from 'react';

// A utility hook that can be used or adapted for useEventListener as well
// For this snippet, we'll keep it self-contained for clarity.

function useKeyPress(targetKey) {
  // State for keeping track of whether key is pressed
  const [keyPressed, setKeyPressed] = useState(false);

  // Add event listeners
  useEffect(() => {
    // If pressed key is our target key then set to true
    const downHandler = ({ key }) => {
      if (key === targetKey) {
        setKeyPressed(true);
      }
    };

    // If released key is our target key then set to false
    const upHandler = ({ key }) => {
      if (key === targetKey) {
        setKeyPressed(false);
      }
    };

    window.addEventListener('keydown', downHandler);
    window.addEventListener('keyup', upHandler);

    // Remove event listeners on cleanup
    return () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
    };
  }, [targetKey]);

  return keyPressed;
}

export default useKeyPress;

// Example Usage:
// function MyComponent() {
//   const isSpacePressed = useKeyPress(' ');
//   const isEnterPressed = useKeyPress('Enter');

//   return (
//     <div>
//       <p>Spacebar pressed: {isSpacePressed ? 'Yes' : 'No'}</p>
//       <p>Enter key pressed: {isEnterPressed ? 'Yes' : 'No'}</p>
//     </div>
//   );
// }