Add arrow stepping

david-yz-liu · Nov 29, 2024 · 295509b · 295509b
1 parent 5def04b
commit 295509b
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/webstepper/src/App.tsx b/webstepper/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Header from "./Header";
 import { Button, Box, Typography, Stack } from "@mui/material";
 import SvgDisplay from "./SvgDisplay";
@@ -20,6 +20,23 @@ export default function App() {
         setStep(Math.min(Math.max(newStep, 0), limit - 1));
     };
 
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key == "ArrowLeft") {
+                handleStep(step - 1);
+            }
+            if (event.key == "ArrowRight") {
+                handleStep(step + 1);
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [step]);
+
     return (
         <main className="container">
             <Header />