React image & video viewer

React Image Video Lightbox is a lightweight and customizable React component that provides a modern and responsive lightbox for displaying images and youtube or mp4 videos. It supports easy navigation, full-screen previews, and offers a seamless user experience for showcasing media content. This library is ideal for galleries, portfolios, and any project requiring media presentation with minimal effort. Compatible with modern React versions and fully responsive across devices.

View demo

Marcell Calero - Linkedin

Installation

npm install react-image-video-viewer

Usage

<ReactImageVideoviewer
  data={[
    {
      url: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Flag_of_Uruguay.svg/800px-Flag_of_Uruguay.svg.png",
      type: "photo",
      altTag: "some image",
    },
    {
      url: "https://www.sample-videos.com/video321/mp4/240/big_buck_bunny_240p_1mb.mp4",
      type: "video",
      title: "Placeholder video",
    },
    {
      url: "https://www.youtube.com/embed/iTjxqWolgHY",
      type: "video",
      title: "some other video",
    },
  ]}
  startIndex={0}
  showResourceCount={true}
  onCloseCallback={this.callbackFunction}
  onNavigationCallback={(currentIndex) =>
    console.log(`Current index: ${currentIndex}`)
  }
/>

Properties

Property	Type	Description
data	Array of resources	An array of resource objects (see resource object below)
startIndex	number	Index of image/video where the viewer should open
showResourceCount	boolean	Show resource count in the upper left corner
onCloseCallback	Function => void	Callback function called when the viewer is closed
onNavigationCallback	Function(currentIndex) => void	Callback function called on navigation between resources

Resource Object

Property	Type	Description
url	string	Url of the image/video
type	string	Two types are supported - 'photo' & 'video' (only .mp4, .mov and YouTube videos are supported)
altTag	string	Alt tag for image
title	string	Title for iframe when rendering YouTube, .mp4 or .mov video
poster	string	Poster image for .mp4 or .mov video
autoPlay	boolean	Autoplay video for .mp4 or .mov video

Package detail

react-image-video-viewer

readme