How to set a Modal popup with an image in React

How to set a Modal popup with an image in React

In this session, I will teach you how to run this project using React JS. if you are new to React JS you can see my other video on this channel freelessonpro . Let's start with this session in this chapter.

in this part i will show you step by step process :

First of all you need to install 

npm i react-image-lightbox

Modal popup with an image in React

1. Setup a React App
2. Install npm dependency
3. Add popup component to preview the image
4. Output

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" }

];

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 - 1) % images.length].url}

  onCloseRequest={() => setIsOpen(false)}

  onMovePrevRequest={() => setImgIndex((imgIndex + images.length - 1) % images.length)}

  onMoveNextRequest={() => setImgIndex((imgIndex + 1) % images.length)}

/>}

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 className="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 - 1) % images.length].url}

        onCloseRequest={() => setIsOpen(false)}

        onMovePrevRequest={() => setImgIndex((imgIndex + images.length - 1) % images.length)}

        onMoveNextRequest={() => setImgIndex((imgIndex + 1) % images.length)}

      />}

    </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..!! 🙂