4.0.1 • Published 8 months ago

react-image-video-viewer v4.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

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

PropertyTypeDescription
dataArray of resourcesAn array of resource objects (see resource object below)
startIndexnumberIndex of image/video where the viewer should open
showResourceCountbooleanShow resource count in the upper left corner
onCloseCallbackFunction => voidCallback function called when the viewer is closed
onNavigationCallbackFunction(currentIndex) => voidCallback function called on navigation between resources

Resource Object

PropertyTypeDescription
urlstringUrl of the image/video
typestringTwo types are supported - 'photo' & 'video' (only .mp4, .mov and YouTube videos are supported)
altTagstringAlt tag for image
titlestringTitle for iframe when rendering YouTube, .mp4 or .mov video
posterstringPoster image for .mp4 or .mov video
autoPlaybooleanAutoplay video for .mp4 or .mov video
4.0.1

8 months ago

3.0.12

2 years ago

3.0.13

2 years ago

3.0.10

2 years ago

3.0.11

2 years ago

3.0.8

2 years ago

3.0.7

2 years ago

3.0.14

2 years ago

3.0.15

2 years ago

3.0.9

2 years ago

3.0.6

2 years ago

3.0.5

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago