Skip to main content

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:

http://localhost:3000

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.

note

Step 2: Create a New React App​

Use the create-next-app package to create a new React app.

>_ Terminal
npx create-next-app@latest

Alternatively, you can use Yarn or pnpm to configure your project like so:

Yarn Installation
yarn create next-app
PNPM Installation
pnpm create next-app
info

The choice of Next.js is purely a random one. This tutorial's concept 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 the src/ 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:

>_ Terminal
cd react-image-grid-gallery-demo-001

Using your text editor, install the React Image Grid Gallery locally.

npm install react-image-grid-gallery --save
Creating NPM Package Book Now Available at Amazon

Open the page.js file located in the app folder of your Next.js application.

Highlight of the page.js file

The page.js file within the app directory

Then, delete all its content. And import the image grid gallery package like so:

page.js
"use client";

import ImageGallery from "react-image-grid-gallery";
note

Make sure you declare the "use client" directive above your import statements.

After importing the gallery package, render it to the DOM as follows:

page.js
"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 imgArray={imagesArray} columnWidth={230} gapSize={24} />;
}

The ImageGallery component accepts three props:

PropsTypeDefaultDescription
imgArrayarrayundefined

Required. An array of objects containing the following properties:

columnWidthnumber230

Optional. The minimum width of the gallery's columns.

gapSizenumber24

Optional. The gallery's gap size.

Step 7: Run the Application​

Take a look at your app in the browser by running the following:

npm run dev
tip

Use the @codesweetly/react-youtube-playlist library to add a YouTube playlist to your React application.

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.