How to Add Image Grid Gallery to React Apps
This article will use a simple project to explain how to use the react-image-grid-gallery
library to add image galleries to your React applications.
Here is a demo of what we will build:
So, without further ado, let's start with the first step.
Step 1: Get the Right Node and NPM Version
Make sure you have Node 10.16 (or greater) and NPM 5.6 (or greater) installed on your system.
- Use this package manager guide to install, update, or verify your Node version.
- If you prefer to use Yarn, make sure you have Yarn 0.25 (or greater).
Step 2: Create a New React App
Use the create-next-app
package to create a new React app.
npx create-next-app@latest
Alternatively, you can use Yarn or pnpm to configure your project like so:
yarn create next-app
pnpm create next-app
The choice of Next.js is purely a random one. The concept of this tutorial applies to other React applications such as Create React App, Vite, and Gatsby.
In other words, don't worry if you are unfamiliar with Next.js. We will only use its basic features to learn how to create an image gallery. So, relax—you are in good hands. 😊
After running the above command, Next will ask the following questions:
- Ok to proceed? (y) Enter the y key on your keyboard to proceed.
- What is your project named? You can name it anything you wish—for instance,
react-image-grid-gallery-demo-001
. - Would you like to use TypeScript with this project? » No / Yes Select No, as we will use plain JavaScript in this tutorial.
- Would you like to use ESLint with this project? » No / Yes Select No as we do not wish to use ESLint in this tutorial.
- Would you like to use Tailwind CSS with this project? » No / Yes Select No as we do not wish to use Tailwind CSS in this tutorial.
- Would you like to use
src/
directory with this project? » No / Yes Select No as we do not wish to use thesrc/
directory in this tutorial. - Use App Router (recommended)? » No / Yes Select Yes as we are ok using Next's App router configurations. (Don't worry if you know nothing about the App Router. We are only using Next's basic functionalities to learn how to create an image gallery.)
- Would you like to customize the default import alias? » No / Yes Select No as we are okay with using Next's default import alias for this test-app.
Once you've answered all the questions, Next.js will create your new app.
Step 3: Go Inside the Project Directory
After the installation process, navigate into the project directory like so:
cd react-image-grid-gallery-demo-001
Step 4: Install the Image Grid Gallery Package
Using your text editor, install the React Image Grid Gallery locally.
- npm
- Yarn
- pnpm
npm install react-image-grid-gallery --save
yarn add react-image-grid-gallery
pnpm add react-image-grid-gallery
Master NPM Package Creation
Step 5: Import the Image Grid Gallery Package
Open the page.js
file located in the app folder of your Next.js application.
Then, delete all its content. And import the image grid gallery package like so:
"use client";
import { ImageGallery } from "react-image-grid-gallery";
Make sure you declare the "use client"
directive above your import
statements.
Step 6: Render the Image Gallery Component
After importing the gallery package, render it to the DOM as follows:
"use client";
import { ImageGallery } from "react-image-grid-gallery";
const imagesArray = [
{
alt: "Image1's alt text",
caption: "Image1's description",
src: "http://example.com/image1.jpg",
},
{
alt: "Image2's alt text",
caption: "Image2's description",
src: "http://example.com/image2.png",
},
{
alt: "Image3's alt text",
caption: "Image3's description",
src: "http://example.com/image3.webp",
},
];
export default function App() {
return (
<ImageGallery
imagesInfoArray={imagesArray}
columnWidth={230}
gapSize={24}
/>
);
}
The ImageGallery
component accepts three props:
Props | Type | Default | Description |
---|---|---|---|
imagesInfoArray | array | undefined | (Required) An array of objects containing the following properties:
|
columnWidth | number | 230 | (Optional) The minimum width of the gallery's columns. |
gapSize | number | 24 | (Optional) The gallery's gap size. |
Express Your Love for Coding!
Step 7: Run the Application
Take a look at your app in the browser by running the following:
- npm
- Yarn
- pnpm
npm run dev
yarn dev
pnpm run dev
Use the @codesweetly/react-youtube-playlist
library to add a YouTube playlist to your React application.
Note for Docusaurus users
Did you get a ReferenceError: crypto is not defined
error during the build step? If so, this note is for you.
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.
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).
Live Demo
Below is a live demo of the React Image Grid Gallery.
Overview
Although we used the react-image-grid-gallery
library to create an image gallery in a simple project, you can use the same principles on any React application.
Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.
Tweet this article