1import { useState, useEffect } from "react";
2
3export function useKeyPress(targetKey: string) {
4 const [keyPressed, setKeyPressed] = useState(false);
5
6 const downHandler = ({ key }: KeyboardEvent) => {
7 if (key === targetKey) {
8 setKeyPressed(true);
9 }
10 };
11
12 const upHandler = ({ key }: KeyboardEvent) => {
13 if (key === targetKey) {
14 setKeyPressed(false);
15 }
16 };
17
18 useEffect(() => {
19 window.addEventListener("keydown", downHandler);
20 window.addEventListener("keyup", upHandler);
21
22 return () => {
23 window.removeEventListener("keydown", downHandler);
24 window.removeEventListener("keyup", upHandler);
25 };
26 }, [targetKey]);
27
28 return keyPressed;
29}