Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Check out the new Pro Zone

React Image Grid Gallery v3 Release

React Image Grid Gallery version 3 is out! đŸ¥³

Let’s discuss the highlights.

Breaking Changes

This release comes with one (1) breaking change.

  • A unique id property is now required for each item in the imagesArray.
const imagesArray = [
  {
    id: "uniqueid111",
    alt: "Image1's alt text",
    caption: "Image1's description",
    src: "http://example.com/image1.jpg",
  },
  ...
]

Other Notable Changes

  • Full compatibility with React 19.
  • Two (2) new optional props: fixedCaption and customStyles.
PropsTypeDefaultDescription

fixedCaption

booleanfalse

(Optional) Specify whether to display the image captions permanently (true) or to hide them by default and ease them in on mouse hover (false).

customStyles

ImageGalleryStylesType

(Optional) Custom styles to override the following element’s default styles:

  • Gallery container: galleryContainerStyle
  • Gallery image button: imageBtnStyle
  • Gallery image container: imageContainerStyle
  • Gallery image element: imageStyle
  • Gallery image caption: imageCaptionStyle
  • Modal container: modalContainerStyle
  • Modal slide number: modalSlideNumberStyle
  • Modal toolbar: modalToolbarStyle
  • Modal toolbar button: modalToolbarBtnStyle
  • Modal slideshow section: modalSlideShowSectionStyle
  • Modal image element: modalImageStyle
  • Modal slide button: modalSlideBtnStyle

Here are the steps required to upgrade to the latest version:

  1. Install the latest version

    Terminal
    npm install react-image-grid-gallery@latest

    Alternatively, you can use Yarn or pnpm like so:

    Yarn Installation
    yarn upgrade react-image-grid-gallery --latest
    PNPM Installation
    pnpm update react-image-grid-gallery --latest

  2. Update the imagesArray

    Add a unique id property to each item in the imagesArray like so:

    const imagesArray = [
    {
     id: "uniqueid111",
     alt: "Image1's alt text",
     caption: "Image1's description",
     src: "http://example.com/image1.jpg",
    },
    {
     id: "uniqueid222",
     alt: "Image2's alt text",
     caption: "Image2's description",
     src: "http://example.com/image2.png",
    },
    {
     id: "uniqueid333",
     alt: "Image3's alt text",
     caption: "Image3's description",
     src: "http://example.com/image3.webp",
    },
    ];

Note for Docusaurus Users

Suppose you used the Crypto API to generate your id. In that case, wrap the ImageGallery component in <BrowserOnly> if you get a ReferenceError: crypto is not defined error during your build step.

Example:

import BrowserOnly from "@docusaurus/BrowserOnly";


function YourComponent() {
  return (
    <BrowserOnly fallback={<div>Loading...</div>}>
      {() => {
        const ImageGallery = require("react-image-grid-gallery").ImageGallery;
        return (
          <ImageGallery
            imagesInfoArray={imagesArray}
            columnWidth={230}
            gapSize={24}
          />
        );
      }}
    </BrowserOnly>
  );
}

This process is essential if your imagesArray uses the Web Crypto API. The <BrowserOnly> component tells Docusaurus to render the ImageGallery library only in the browser. It ensures that the Crypto API runs only in CSR (Client-Side Rendering) rather than during build or SSR (Server-Side Rendering).

See the complete project-based guide to learn how to add the ImageGallery package to your React applications. You can use the library with Vite, NextJS, Remix, or any other React app.

Support CodeSweetly