feat: Create thumbnail images where the active image auto-scrolls into view

Author: oluwatobiss

package-lock.json

@@ -47,6 +47,7 @@
     "@release-it/conventional-changelog": "^9.0.4",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.3",
     "dotenv-cli": "^8.0.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",

package.json

@@ -110,3 +110,12 @@ test("image gallery renders correctly with custom styles and fixed caption", ()
     />
   );
 });
+
+test("image gallery works with custom thumbnail border", () => {
+  render(
+    <ImageGallery
+      imagesInfoArray={imagesArray}
+      thumbnailBorder="medium dashed pink"
+    />
+  );
+});

src/ImageGallery.test.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useRef, useState, useEffect } from "react";
+import { flushSync } from "react-dom";
 import { ImageGalleryPropsType } from "./ImageGallery.types";
 import { imageGalleryStyles } from "./ImageGalleryStyles";
 
@@ -8,6 +9,7 @@ export function ImageGallery({
   columnWidth = 230,
   gapSize = 24,
   fixedCaption = false,
+  thumbnailBorder = "3px solid #fff",
   customStyles = {},
 }: ImageGalleryPropsType) {
   const [imageSrc, setImageSrc] = useState<string | undefined>(undefined);
@@ -16,6 +18,7 @@ export function ImageGallery({
   const [fullscreen, setFullscreen] = useState(false);
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const lightboxRef = useRef<HTMLElement | null>(null);
+  const activeThumbImgRef = useRef<HTMLImageElement | null>(null);
   const defaultStyles = imageGalleryStyles(
     columnCount,
     columnWidth,
@@ -70,6 +73,14 @@ export function ImageGallery({
     }
   }
 
+  function scrollActiveThumbImgIntoView() {
+    activeThumbImgRef.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+  }
+
   function switchFullScreen(on: boolean) {
     if (on) {
       lightboxRef.current?.requestFullscreen().catch((error) => {
@@ -234,7 +245,10 @@ export function ImageGallery({
               ...modalSlideBtnStyle,
             }}
             title="Previous image"
-            onClick={() => changeSlide(-1)}
+            onClick={() => {
+              flushSync(() => changeSlide(-1));
+              scrollActiveThumbImgIntoView();
+            }}
           >
             {SvgElement(
               <path
@@ -257,7 +271,10 @@ export function ImageGallery({
               ...modalSlideBtnStyle,
             }}
             title="Next image"
-            onClick={() => changeSlide(1)}
+            onClick={() => {
+              flushSync(() => changeSlide(1));
+              scrollActiveThumbImgIntoView();
+            }}
           >
             {SvgElement(
               <path
@@ -267,7 +284,19 @@ export function ImageGallery({
             )}
           </button>
         </section>
-        <section style={modalThumbnailSectionStyle}>I love you!</section>
+        <section style={modalThumbnailSectionStyle}>
+          {imagesInfoArray.map((imageInfo, index) => (
+            <img
+              ref={slideNumber - 1 === index ? activeThumbImgRef : null}
+              style={{
+                border: slideNumber - 1 === index ? thumbnailBorder : "",
+              }}
+              key={imageInfo.id}
+              src={imageInfo.src}
+              alt={imageInfo.alt}
+            />
+          ))}
+        </section>
       </article>
     </dialog>
   );

src/ImageGallery.tsx

@@ -25,5 +25,6 @@ export interface ImageGalleryPropsType {
   columnWidth?: string | number;
   gapSize?: number;
   fixedCaption?: boolean;
+  thumbnailBorder?: string;
   customStyles?: ImageGalleryStylesType;
 }

src/ImageGallery.types.tsx

@@ -6,8 +6,8 @@ export function imageGalleryStyles(
   gapSize?: number,
   fixedCaption?: boolean
 ): ImageGalleryStylesType {
-  const modalSlideShowSectionHeight = "82vh";
-  const modalThumbnailSectionHeight = "18vh";
+  const modalSlideShowSectionHeight = "80vh";
+  const modalThumbnailSectionHeight = "20vh";
   const galleryContainerStyle: React.CSSProperties = {
     columnCount,
     columnWidth: `${columnWidth}px`,
@@ -93,10 +93,6 @@ export function imageGalleryStyles(
     width: "inherit",
     height: `${modalSlideShowSectionHeight}`,
   };
-  const modalThumbnailSectionStyle: React.CSSProperties = {
-    backgroundColor: "blue",
-    height: `${modalThumbnailSectionHeight}`,
-  };
   const modalImageStyle: React.CSSProperties = {
     margin: "auto",
     maxWidth: "100vw",
@@ -114,6 +110,13 @@ export function imageGalleryStyles(
     userSelect: "none",
     WebkitUserSelect: "none",
   };
+  const modalThumbnailSectionStyle: React.CSSProperties = {
+    display: "flex",
+    overflow: "hidden",
+    height: `${modalThumbnailSectionHeight}`,
+    paddingBlock: "12px",
+    columnGap: "7px",
+  };
   return {
     galleryContainerStyle,
     imageBtnStyle,