react-image-video-lightbox

    3.0.0 • Public • Published

    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

    Property Type Description
    data Array of resources An array of resource objects (see resource object below)
    startIndex number Index of image/video where the lightbox should open
    showResourceCount boolean Show resource count in the upper left corner
    onCloseCallback Function => void Callback function called when the lightbox 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 YouTube videos are supported)
    altTag string Alt tag for image
    title string Title 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

    Install

    npm i react-image-video-lightbox

    DownloadsWeekly Downloads

    1,396

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    91.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar