React component that handles pressed/released states for a single key on the keyboard.

KeyPressed.tsx

import {FC, useEffect} from 'react';

export interface KeyPressedProps {
    keyCode: string;

    onPress: () => void;

    onRelease: () => void;
}

export const KeyPressed: FC<KeyPressedProps> = ({
    keyCode,
    onPress,
    onRelease
}) => {
    useEffect(() => {
        const listener = (e: KeyboardEvent) => {
            if (!e.repeat && e.key === keyCode) {
                if (e.type === 'keydown') {
                    onPress();
                }
                if (e.type === 'keyup') {
                    onRelease();
                }
            }
        };
        document.addEventListener('keydown', listener);
        document.addEventListener('keyup', listener);
        return () => {
            document.removeEventListener('keydown', listener);
            document.removeEventListener('keyup', listener);
        };
    }, [keyCode, onPress, onRelease]);
    return null;
};