Creating a Responsive Image Lightbox with Zoom and Pan in React

In this tutorial, we will be building a React application that utilizes a custom component to display an image lightbox with zoom and pan support. We will be using the react-image-lightbox library to handle the lightbox functionality and the react-medium-image-zoom library for the image zoom and panning functionality.

Step 1: Set up a React project

To begin, we will set up a new React project. You can use create-react-app to set up a new React project.

npx create-react-app my-app

 

Step 2: Install dependencies

Next, we will install the react-image-lightbox and react-medium-image-zoom libraries. These libraries will handle the lightbox and zoom/pan functionality for our application.

npm install react-image-lightbox react-medium-image-zoom

 

Step 3: Create the Lightbox component

In this step, we will create a new component called Lightbox that will handle the lightbox functionality. This component will render an image and include buttons for navigating to the next and previous images, as well as a button for closing the lightbox.

import React from 'react';
import ImageLightbox from 'react-image-lightbox';

const Lightbox = ({ images, currentIndex }) => {
  const [photoIndex, setPhotoIndex] = useState(currentIndex);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      {isOpen && (
        <ImageLightbox
          mainSrc={images[photoIndex].url}
          nextSrc={images[(photoIndex + 1) % images.length].url}
          prevSrc={images[(photoIndex + images.length - 1) % images.length].url}
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() =>
            setPhotoIndex((photoIndex + images.length - 1) % images.length)
          }
          onMoveNextRequest={() =>
            setPhotoIndex((photoIndex + 1) % images.length)
          }
        />
      )}
      <img src={images[currentIndex].url} onClick={() => setIsOpen(true)} />
    </div>
  );
};

export default Lightbox;

 

Step 4: Enable zoom and pan

To enable zooming and panning, we will import the react-medium-image-zoom library and wrap our Lightbox component with it.

import ImageZoom from 'react-medium-image-zoom'

const Lightbox = ({ images, currentIndex }) => {
    ...
    return(    <ImageZoom
        image={{
            src: images[currentIndex].url,
            alt: images[currentIndex].alt,
            style: { width: '100%' }
        }}
    />
    ...
    )
}

By doing this, we are passing the current image’s URL and alt text as props to the ImageZoom component, which will handle the zoom and pan functionality.

 

Step 5: Utilize the component

Now that we have our Lightbox component set up, we can use it in our application by passing it an array of images and the current index of the image that should be displayed.

const images = [
    { url: 'image1.jpg', alt: 'image 1' },
    { url: 'image2.jpg', alt: 'image 2' },
    { url: 'image3.jpg', alt: 'image 3' },
];

const App = () => {
    return (
        <div>
            <Lightbox images={images} currentIndex={0} />
        </div>
    )
}

 

Step 6: Styling

You can add the styling to your component to make it look the way you want.

 

Conclusion: In this tutorial, we have built a React application that utilizes a custom component to display an image lightbox with zoom and pan support. We have used the react-image-lightbox and react-medium-image-zoom libraries to handle the lightbox and zoom/pan functionality. By following these steps, you should now have a working image lightbox with zoom and pan support in your React application.