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.