Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Node.js Sounds Complicated? This Article Makes It Click

React Image Grid Gallery v3 Release

React Image Grid Gallery version 3 is out! 🥳

Let’s discuss the highlights.

Breaking Changes

Section titled “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

Section titled “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
Section titled “How to Update the React Image Grid Gallery Package”

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

Section titled “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).

Section titled “How to Use the React Image Grid Gallery Package”

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