Reactjs-image-gallery NPM

reactjs-image-gallery

Responsive, flexible and easy customizable images gallery library. List images in table view order, thumbnails, onclick show big image preview, buttons for preview of previous and next images in the images list.

DEMO

Install

npm install --save reactjs-image-gallery

FEATURES

Gallery images listing - responsive table format
Image title
Responsive design
Thumbnails
View previous image
View next image
Download image
Zoom image - full size
Rotate image
Lightweight ~7 kB gzipped

Usage

import React, { Component } from "react";

import DztImageGalleryComponent from "reactjs-image-gallery";

class Example extends Component {
  render() {
    var data = [
      {
        url:
          "https://images.unsplash.com/photo-1465310477141-6fb93167a273?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        title: "Kayak",
        thumbUrl:
          "https://images.unsplash.com/photo-1465310477141-6fb93167a273?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
      },
      {
        url:
          "https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        title: "Cyclist competition",
        thumbUrl:
          "https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
      },
      {
        url:
          "https://images.unsplash.com/photo-1526485856375-9110812fbf35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        title: "Surfer in action",
        thumbUrl:
          "https://images.unsplash.com/photo-1526485856375-9110812fbf35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
      },
      {
        url:
          "https://images.unsplash.com/photo-1423994485548-7c3cf5c99cfb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1947&q=80",
        title: "Drops",
        thumbUrl:
          "https://images.unsplash.com/photo-1423994485548-7c3cf5c99cfb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1947&q=80"
      },

      {
        url:
          "https://images.unsplash.com/photo-1444465693019-aa0b6392460d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        title: "Bird",
        thumbUrl:
          "https://images.unsplash.com/photo-1444465693019-aa0b6392460d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
      },
      {
        url:
          "https://images.unsplash.com/photo-1436968188282-5dc61aae3d81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
        title: "Blue river",
        thumbUrl:
          "https://images.unsplash.com/photo-1436968188282-5dc61aae3d81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
      },
      {
        url:
          "https://images.unsplash.com/photo-1446488547543-78c11468449a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1949&q=80",
        title: "Mountains",
        thumbUrl:
          "https://images.unsplash.com/photo-1446488547543-78c11468449a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
      }
    ];

    return (
      <div>
        <DztImageGalleryComponent images={data} />
      </div>
    );
  }
}

Prop	Type	Description
`images`	`array`	Array contains image objects. Each image object contains `url`, `title` and `thumbUrl` properties as is shown in the example usage.
`imgClassName`	`String`	Optional. `class` for the small preview image.
`hideDownload`	`boolean`	Optional. Set to `true` to hide download-button from the Lightbox.
`hideZoom`	`boolean`	Optional. Set to `true` to hide zoom-button from the Lightbox.
`hideRotate`	`boolean`	Optional. Set to `true` to show rotate-button within the Lightbox.
`imageBackgroundColor`	`String`	Optional. Background color of the image shown in Lightbox. Defaults to black. Handy for transparent images.