Categories
React Answers

How to add a image and video lightbox with React?

Spread the love

To add a image and video lightbox with React, we use the React image & video lightbox component.

To install it, we run

npm i react-image-video-lightbox

Then we use it buy writing

<ReactImageVideoLightbox
  data={[
    {
      url: "https://placekitten.com/450/300",
      type: "photo",
      altTag: "some image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some video",
    },
    {
      url: "https://placekitten.com/550/500",
      type: "photo",
      altTag: "some other image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some other video",
    },
  ]}
  startIndex={0}
  showResourceCount={true}
  onCloseCallback={callbackFunction}
  onNavigationCallback={(currentIndex) =>
    console.log(`Current index: ${currentIndex}`)
  }
/>

We add all the content for our lightbox into the data prop of the ReactImageVideoLightbox component by setting data to an array of items we want to show.

Then they’ll all show on the screen.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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