Navigate images with keyboard left and right keys

RoccoSmit · Nov 10, 2024 · 0b95648 · 0b95648
1 parent 45d4d39
commit 0b95648
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
@@ -94,6 +94,15 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
     }
   };
 
+  const handleImageContainerKeyDown = (event: KeyboardEvent) => {
+    if (event.key == "ArrowLeft") {
+      showPrevImg();
+    }
+    else if (event.key == "ArrowRight") {
+      showNextImg();
+    }
+  };
+
   const handleImgContainerScroll = (event: React.WheelEvent) => {
     const offsetX = event.nativeEvent.offsetX;
     const offsetY = event.nativeEvent.offsetY;
@@ -137,6 +146,13 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
     setViewportScalable();
   }, []);
 
+  useEffect(() => {
+    document.addEventListener("keydown", handleImageContainerKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleImageContainerKeyDown);
+    }
+  }, [currentIndex]);
+
   return (
     <>
       <div className="btns-container">