Implementing a useKeyPress Hook in React

The useKeyPress hook is a valuable tool for React developers, enabling them to easily detect and respond to key presses within their components. This challenge asks you to implement this hook, providing a reusable and efficient way to track which keys are currently being pressed down. This is particularly useful for creating interactive applications, games, or any UI element that requires keyboard input.

Problem Description

You are tasked with creating a custom React hook called useKeyPress. This hook should accept a single argument: a string representing the key code to monitor (e.g., "Enter", "Escape", "ArrowLeft", "a", "1"). The hook should return a boolean value indicating whether the specified key is currently being pressed down.

Key Requirements:

• Key Code Monitoring: The hook must accurately detect when the specified key is pressed and released.
• Boolean Return Value: The hook must return true when the key is pressed and false otherwise.
• Event Listener Management: The hook must properly manage the keydown and keyup event listeners to avoid memory leaks and ensure correct behavior.
• Reactivity: The hook must re-render the component whenever the key state changes (pressed or released).
• TypeScript Support: The hook must be written in TypeScript and properly typed.

Expected Behavior:

• When the component mounts, the hook should attach keydown and keyup event listeners to the document.
• On keydown for the specified key, the hook should set its internal state to true.
• On keyup for the specified key, the hook should set its internal state to false.
• The hook should return the current state (pressed or not pressed).
• When the component unmounts, the hook should remove the event listeners.

Edge Cases to Consider:

• Case Sensitivity: The key code should be case-insensitive for letters (e.g., "a" should match "A").
• Special Keys: Handle special keys like "Enter", "Escape", "ArrowLeft", "ArrowRight", etc., correctly.
• Multiple Key Presses: The hook should accurately track the state even if the key is pressed and released multiple times.
• Key Code Variations: Consider that different browsers might represent keys differently. The hook should be robust enough to handle common variations.

Examples

Example 1:

Input: keyToMonitor = "Enter"
Output: true (when Enter key is pressed)
Explanation: The hook detects the "Enter" key being pressed down and returns true.  It returns false when the Enter key is released.

Example 2:

Input: keyToMonitor = "a"
Output: true (when 'a' or 'A' key is pressed)
Explanation: The hook detects the 'a' or 'A' key being pressed down and returns true, demonstrating case-insensitive matching.

Example 3: (Edge Case - Multiple Presses)

Input: keyToMonitor = "Spacebar"
Output: true (during each press of the Spacebar)
Explanation: The hook correctly tracks the state even when the Spacebar is pressed and released multiple times in quick succession.

Constraints

• The hook must be implemented using React's useState and useEffect hooks.
• The hook must be compatible with functional components written in TypeScript.
• The hook should avoid unnecessary re-renders.
• The hook should not introduce any memory leaks.
• The key code string should be a valid string.

Notes

• Consider using document.addEventListener and document.removeEventListener to manage the event listeners.
• The keydown and keyup events provide information about the pressed key. You'll need to extract the key code from the event object.
• Think about how to handle different key codes and their representations across browsers. The KeyboardEvent.key property is generally reliable.
• Remember to clean up the event listeners when the component unmounts to prevent memory leaks.
• Focus on creating a clean, readable, and well-documented hook.