React Image Grid Gallery v2 Release

Jan 8, 2024

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:

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

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";
```

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:

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.

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