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.
Then they’ll all show on the screen.