riv

react-image-video-lightbox

React lightbox that supports images & videos. Optimized for mobile UI, but can be used on desktop as well.

Showing:

Popularity

Downloads/wk

2.2K

GitHub Stars

14

Maintenance

Last Commit

4mos ago

Contributors

5

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

React Lightbox

Reviews

Top Feedback

1Great Documentation
1Buggy

Readme

React image & video lightbox

View demo

Installation

npm install react-image-video-lightbox

Usage

<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={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 lightbox should open
showResourceCountbooleanShow resource count in the upper left corner
onCloseCallbackFunction => voidCallback function called when the lightbox 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 YouTube videos are supported)
altTagstringAlt tag for image
titlestringTitle for iframe when rendering YouTube video

Have a feature request or suggestion?

Create an issue on Github: https://github.com/Ngineer101/react-image-video-lightbox/issues

Rate & Review

Great Documentation1
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy1
Abandoned0
Unwelcoming Community0
100
VytenisLithuania2 Ratings1 Review
Front-END
September 3, 2020
Buggy

On mobile there is no swipe ability


0
gokulbridge1 Rating0 Reviews
August 13, 2020
Great Documentation

Tutorials

No tutorials found
Add a tutorial