useKeyPress Hook
A custom React Hook to detect keyboard key presses with TypeScript support
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]);