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.

Demo Application

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

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.

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

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.

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.

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

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.

Check out the more props of the Lightbox.

4. Output

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

App.js

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
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *