Adding configurable styles, key for images, and visibility of captions

README.md

@@ -88,6 +88,7 @@ function App() {
 - `alt`: (**Required**) The image's [alternative text](https://webaim.org/techniques/alttext).
 - `caption`: (**Optional**) The [image's description](https://www.studysmarter.co.uk/explanations/english/blog/image-caption).
 - `src`: (**Required**) The image's [URL](https://codesweetly.com/web-address-url).
+- `key`: (**Optional**) The [key](https://react.dev/learn/rendering-lists) for the button wrapping the image.
 
 </td>
 </tr>
@@ -133,6 +134,41 @@ function App() {
 
 </td>
 </tr>
+<tr>
+<td>
+
+`captionVisible`
+
+</td>
+<td>boolean</td>
+<td><code>false</code></td>
+<td>
+
+(**Optional**) Wether to permanently show image captions, or have them
+ease in.
+
+</td>
+</tr>
+<tr>
+<td>
+
+`styles`
+
+</td>
+<td>ImageGalleryStylesType</td>
+<td><code>undefined</code></td>
+<td>
+
+(**Optional**) Styles to override default styles with (can optionally include
+any of: `galleryContainerStyle`, `imageBtnStyle`, `imageContainerStyle`, 
+`imageStyle`, `imageCaptionStyle`, `modalContainerStyle`, 
+`modalSlideNumberStyle`, `modalToolbarStyle`, `modalToolbarBtnStyle`, 
+`modalSlideShowSectionStyle`, `modalImageStyle`, `modalSlideBtnStyle`.)
+
+
+</td>
+</tr>
+
 </tbody>
 </table>
 

package.json

@@ -13,7 +13,8 @@
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
     "release": "dotenv release-it --",
-    "test": "jest --config jest.config.ts"
+    "test": "jest --config jest.config.ts",
+    "watch": "tsc --watch"
   },
   "files": [
     "./dist"

src/ImageGallery.test.tsx

@@ -66,6 +66,28 @@ const imagesArray = [
   },
 ];
 
+const imagesWithKeyArray = [
+  {
+    alt: "Image1's alt text",
+    caption: "Image1's description",
+    src: "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_1280.jpg",
+    key: "image_1"
+  },
+  {
+    alt: "Image2's alt text",
+    caption: "Image2's description",
+    src: "https://cdn.pixabay.com/photo/2023/05/21/11/45/flowers-8008392_1280.jpg",
+    key: "image_2"
+  },
+  {
+    alt: "Image3's alt text",
+    caption: "Image3's description",
+    src: "https://cdn.pixabay.com/photo/2020/09/14/15/10/birch-tree-5571242_1280.png",
+    key: "image_3"
+  }
+];
+
+
 test("image gallery renders correctly", () => {
   render(
     <ImageGallery
@@ -76,3 +98,21 @@ test("image gallery renders correctly", () => {
     />
   );
 });
+
+test("image gallery renders correctly with styles and visible captions", () => {
+  const imageContainerStyle: React.CSSProperties = {
+    margin: `0 0 0`,
+    position: "relative",
+  };
+
+  render(
+    <ImageGallery
+      imagesInfoArray={imagesWithKeyArray}
+      columnCount={1}
+      columnWidth={300}
+      gapSize={2}
+      styles={ { imageContainerStyle } }
+      captionVisible={true}
+    />
+  );
+});

src/ImageGallery.tsx

@@ -1,41 +1,37 @@
 import React, { ReactElement, useRef, useState, useEffect } from "react";
-import { ImageGalleryPropsType } from "./ImageGallery.types";
-import { imageGalleryStyles } from "./imageGalleryStyles";
+import { ImageGalleryImageType, ImageGalleryPropsType } from "./ImageGallery.types";
+import { imageGalleryStyles } from "./ImageGalleryStyles";
+
+export type { ImageGalleryImageType };
 
 export function ImageGallery({
   imagesInfoArray,
   columnCount = "auto",
   columnWidth = 230,
   gapSize = 24,
+  captionVisible = false,
+  styles = undefined
 }: ImageGalleryPropsType) {
   const [imageSrc, setImageSrc] = useState("");
   const [slideNumber, setSlideNumber] = useState(1);
   const [showModalControls, setShowModalControls] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const lightboxRef = useRef<HTMLElement | null>(null);
-
-  const galleryContainerStyle = imageGalleryStyles(
-    columnCount,
-    columnWidth,
-    gapSize
-  ).galleryContainerStyle;
-  const imageBtnStyle = imageGalleryStyles().imageBtnStyle;
-  const imageContainerStyle = imageGalleryStyles(
-    undefined,
-    undefined,
-    gapSize
-  ).imageContainerStyle;
-  const imageStyle = imageGalleryStyles().imageStyle;
-  const imageCaptionStyle = imageGalleryStyles().imageCaptionStyle;
-  const modalContainerStyle = imageGalleryStyles().modalContainerStyle;
-  const modalSlideNumberStyle = imageGalleryStyles().modalSlideNumberStyle;
-  const modalToolbarStyle = imageGalleryStyles().modalToolbarStyle;
-  const modalToolbarBtnStyle = imageGalleryStyles().modalToolbarBtnStyle;
-  const modalSlideShowSectionStyle =
-    imageGalleryStyles().modalSlideShowSectionStyle;
-  const modalImageStyle = imageGalleryStyles().modalImageStyle;
-  const modalSlideBtnStyle = imageGalleryStyles().modalSlideBtnStyle;
+  const defaultStyles = imageGalleryStyles(columnCount, columnWidth, gapSize, captionVisible);
+  const galleryStyles = { ...defaultStyles, ...styles };
+  const galleryContainerStyle = galleryStyles.galleryContainerStyle;
+  const imageContainerStyle = galleryStyles.imageContainerStyle;
+  const imageBtnStyle = galleryStyles.imageBtnStyle;
+  const imageStyle = galleryStyles.imageStyle;
+  const imageCaptionStyle = galleryStyles.imageCaptionStyle;
+  const modalContainerStyle = galleryStyles.modalContainerStyle;
+  const modalSlideNumberStyle = galleryStyles.modalSlideNumberStyle;
+  const modalToolbarStyle = galleryStyles.modalToolbarStyle;
+  const modalToolbarBtnStyle = galleryStyles.modalToolbarBtnStyle;
+  const modalSlideShowSectionStyle = galleryStyles.modalSlideShowSectionStyle;
+  const modalImageStyle = galleryStyles.modalImageStyle;
+  const modalSlideBtnStyle = galleryStyles.modalSlideBtnStyle;
 
   function handleImageContainerMouseEnter(
     e: React.MouseEvent<HTMLElement, MouseEvent>
@@ -129,15 +125,15 @@ export function ImageGallery({
     <button
       type="button"
       style={imageBtnStyle}
-      key={crypto.randomUUID()}
+      key={item.key ?? crypto.randomUUID()}
       onKeyDown={(e) =>
         e.key === "Enter" && openLightboxOnSlide(item.src, index + 1)
       }
     >
       <figure
         style={imageContainerStyle}
-        onMouseEnter={(e) => handleImageContainerMouseEnter(e)}
-        onMouseLeave={(e) => handleImageContainerMouseLeave(e)}
+        onMouseEnter={(e) => !captionVisible ? handleImageContainerMouseEnter(e) : undefined}
+        onMouseLeave={(e) => !captionVisible ? handleImageContainerMouseLeave(e) : undefined}
       >
         <img
           alt={item.alt}

src/ImageGallery.types.tsx

@@ -1,10 +1,30 @@
-export interface ImageGalleryPropsType {
-  imagesInfoArray: Array<{
+export interface ImageGalleryStylesType {
+    galleryContainerStyle?: React.CSSProperties;
+    imageBtnStyle?: React.CSSProperties;
+    imageContainerStyle?: React.CSSProperties;
+    imageStyle?: React.CSSProperties;
+    imageCaptionStyle?: React.CSSProperties;
+    modalContainerStyle?: React.CSSProperties;
+    modalSlideNumberStyle?: React.CSSProperties;
+    modalToolbarStyle?: React.CSSProperties;
+    modalToolbarBtnStyle?: React.CSSProperties;
+    modalSlideShowSectionStyle?: React.CSSProperties;
+    modalImageStyle?: React.CSSProperties;
+    modalSlideBtnStyle?: React.CSSProperties;
+}
+
+export interface ImageGalleryImageType {
     alt: string;
     caption?: string;
     src: string;
-  }>;
+    key?: string;
+}
+
+export interface ImageGalleryPropsType {
+  imagesInfoArray: ImageGalleryImageType[];
   columnCount?: string | number;
   columnWidth?: string | number;
   gapSize?: number;
+  styles?: ImageGalleryStylesType;
+  captionVisible?: boolean;
 }

src/ImageGalleryStyles.ts

@@ -1,8 +1,11 @@
+import { ImageGalleryStylesType } from "./ImageGallery.types";
+
 export function imageGalleryStyles(
   columnCount?: string | number,
   columnWidth?: string | number,
-  gapSize?: number
-) {
+  gapSize?: number,
+  captionVisible?: boolean
+) : ImageGalleryStylesType {
   const galleryContainerStyle: React.CSSProperties = {
     columnCount,
     columnWidth: `${columnWidth}px`,
@@ -24,8 +27,8 @@ export function imageGalleryStyles(
     cursor: "pointer",
   };
   const imageCaptionStyle: React.CSSProperties = {
-    opacity: 0,
-    transition: "opacity 1s ease-in-out",
+    opacity: captionVisible ? 1 : 0,
+    transition: captionVisible ? undefined : "opacity 1s ease-in-out",
     position: "absolute",
     bottom: 0,
     zIndex: "1000",