diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
index 1c1d2f2bf3b254300287104577ec48a3ad807c5b..002e132137edafae2c89d5fa6fbcd1b44bb91943 100644
--- a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
+++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
@@ -50,6 +50,6 @@
     background-color: #50cb93;
 }
 
-.keyboard-chip8-chip8 .key:active {
+.keyboard-chip8 .key:active {
     background-color: #2a9d8f;
 }
diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
index 1025610ae06b4e9a25b9921ac39a6a54d07a39d6..09823ed61e9d3ddf1e41a3cf190c80a59883590d 100644
--- a/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
+++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
@@ -4,35 +4,34 @@ import "./keyboard-chip8.css";
 
 type KeyboardChip8Props = {
     style?: string[];
+    onKeyDown?: (key: string) => void;
 };
 
-export const KeyboardChip8: FC<KeyboardChip8Props> = ({ style = [] }) => {
+export const KeyboardChip8: FC<KeyboardChip8Props> = ({
+    style = [],
+    onKeyDown
+}) => {
     const classes = () => ["keyboard", "keyboard-chip8", ...style].join(" ");
+    const renderKey = (key: string) => {
+        return (
+            <span className="key" onKeyDown={() => onKeyDown && onKeyDown(key)}>
+                {key}
+            </span>
+        );
+    };
     return (
         <div className={classes()}>
             <div className="keyboard-line">
-                <span className="key">1</span>
-                <span className="key">2</span>
-                <span className="key">3</span>
-                <span className="key">4</span>
+                {["1", "2", "3", "4"].map((k) => renderKey(k))}
             </div>
             <div className="keyboard-line">
-                <span className="key">Q</span>
-                <span className="key">W</span>
-                <span className="key">E</span>
-                <span className="key">R</span>
+                {["Q", "W", "E", "R"].map((k) => renderKey(k))}
             </div>
             <div className="keyboard-line">
-                <span className="key">A</span>
-                <span className="key">S</span>
-                <span className="key">D</span>
-                <span className="key">F</span>
+                {["A", "S", "D", "F"].map((k) => renderKey(k))}
             </div>
             <div className="keyboard-line">
-                <span className="key">Z</span>
-                <span className="key">X</span>
-                <span className="key">C</span>
-                <span className="key">V</span>
+                {["Z", "X", "C", "V"].map((k) => renderKey(k))}
             </div>
         </div>
     );