Skip to main content

React Image Grid Gallery v2 Release

· 2 min read
Oluwatobi Sofela
Oluwatobi Sofela

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.

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

Step 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

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).

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.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this post