How to set a Modal popup with an image in React

You may need to show the preview (enlarge image) of an image in the popup with zoom in or zoom out functionality. So today we will show you how to set a Modal Popup with an Image in React application using npm package.

Checkout more articles on ReactJS

Demo Application

Output - How to set a Modal popup with an image in React - Clue Mediator

1. Setup a React App

Let’s set up the React project using `create-react-app`. Run the following command to create a React application.

npx create-react-app react-image-modal-popup

We will use the following image list to show the preview in the Modal popup.

const images = [
  { title: "Kitten 1", caption: "Caption 1", url: "//placekitten.com/1500/500" },
  { title: "Kitten 2", caption: "Caption 2", url: "//placekitten.com/4000/3000" },
  { title: "Kitten 3", caption: "Caption 3", url: "//placekitten.com/800/1200" },
  { title: "Kitten 4", caption: "Caption 4", url: "//placekitten.com/1500/1500" }
];

2. Install npm dependency

Here, we’ll use the react-image-lightbox to show preview using lightbox component. Execute the following command to install the package.

npm i react-image-lightbox

3. Add popup component to preview the image

In this step, we will import the package and CSS style at the top of the `App.js` page. Look at the following code.

import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

Now, we will define two different state variables to manage the image index and show/hide the preview.

const [isOpen, setIsOpen] = useState(false);
const [imgIndex, setImgIndex] = useState(0);

Let’s add button and lightbox component to handle the preview. To setup the basic view, we have to use the few necessary properties of the Lightbox such as `imageTitle`, `imageCaption`, `mainSrc`, etc.

<button onclick="{()" ==""> setIsOpen(true)}>Preview Images</button>
{isOpen && <lightbox imagetitle={images[imgIndex].title} imagecaption={images[imgIndex].caption} mainsrc={images[imgIndex].url} nextsrc="{images[(imgIndex" +="" 1)="" %="" images.length].url}="" prevsrc="{images[(imgIndex" images.length="" -="" oncloserequest="{()" ==""> setIsOpen(false)}
  onMovePrevRequest={() => setImgIndex((imgIndex + images.length - 1) % images.length)}
  onMoveNextRequest={() => setImgIndex((imgIndex + 1) % images.length)}
/>}
</lightbox>

Check out the more props of the Lightbox.

4. Output

Let’s put all code together and see how it looks.

App.js

import React, { useState } from 'react';
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

const images = [
  { title: "Kitten 1", caption: "Caption 1", url: "//placekitten.com/1500/500" },
  { title: "Kitten 2", caption: "Caption 2", url: "//placekitten.com/4000/3000" },
  { title: "Kitten 3", caption: "Caption 3", url: "//placekitten.com/800/1200" },
  { title: "Kitten 4", caption: "Caption 4", url: "//placekitten.com/1500/1500" }
];

function App() {

  const [isOpen, setIsOpen] = useState(false);
  const [imgIndex, setImgIndex] = useState(0);

  return (
    <div class="app">
      <h3>Modal popup with an image in React - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></h3>

      <button onclick="{()" ==""> setIsOpen(true)}>Preview Images</button>
      {isOpen && <lightbox imagetitle={images[imgIndex].title} imagecaption={images[imgIndex].caption} mainsrc={images[imgIndex].url} nextsrc="{images[(imgIndex" +="" 1)="" %="" images.length].url}="" prevsrc="{images[(imgIndex" images.length="" -="" oncloserequest="{()" ==""> setIsOpen(false)}
        onMovePrevRequest={() => setImgIndex((imgIndex + images.length - 1) % images.length)}
        onMoveNextRequest={() => setImgIndex((imgIndex + 1) % images.length)}
      />}
    </lightbox></div>
  );
}

export default App;

Run the application and check the output in the browser.

I hope you have found this post to be informative.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project