Skip to main content

React Image Grid Gallery v2 Release

ยท 2 min read

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.

Tweet this post