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
Modal popup with an image in React
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.
1 | npx create-react-app react-image-modal-popup |
We will use the following image list to show the preview in the Modal popup.
1 2 3 4 5 6 | 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.
1 | 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.
1 2 | 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.
1 2 | 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.
1 2 3 4 5 6 7 8 9 10 11 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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..!! 🙂
Why would you have a button to open the carousel? Common UI design says it would be a click or tap on the thumbnail image itself. Good tutorial but I believe fell a bit short in that regard.
Hi Jeremy, first of all, thanks for your feedback. This is an example where we can explain simply so we have used a button.
In real project, we can change it based on the requirement.