Latest Release: React Image Grid Gallery v2

React Image Grid Gallery version 2 is out! 🥳

Let's discuss the highlights.

Breaking Changes

This release comes with two breaking changes.

• Replace default import with named import. This change provides better compatibility with Node and Babel-like tools.
• Rename imgArray prop to imagesInfoArray.

Other Changes

• Change compiler from Babel to TypeScript.
• Remove Babel dependency.
• Replace uniqid dependency with crypto.randomUUID.
• Convert all configuration files to TypeScript.
• Replace external CSS with inline styling.

How to Update the React Image Grid Gallery Package

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

Step 1: Install the latest version

npm install react-image-grid-gallery@latest

Alternatively, you can use Yarn or pnpm like so:

yarn upgrade react-image-grid-gallery --latest

pnpm update react-image-grid-gallery --latest

Step 2: Update the package's import syntax

Replace the package's default import statement with the named import syntax like so:

- import ImageGallery from "react-image-grid-gallery";
+ import { ImageGallery } from "react-image-grid-gallery";

Step 3: Update the package's props

Update the required prop's name as follows:

  <ImageGallery
-    imgArray={imagesArray}
+    imagesInfoArray={imagesArray}
     columnWidth={230}
     gapSize={24}
  />

Note for Docusaurus Users

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>
  );
}

The <BrowserOnly> component tells Docusaurus to render the ImageGallery library only in the browser.

Note: This process is essential because the ImageGallery package uses the Web Crypto API. Therefore, BrowserOnly ensures that the Crypto API runs only in CSR (Client-Side Rendering) rather than during build or SSR (Server-Side Rendering).

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.