@invyo/react-images-viewer v1.6.11

react-images-viewer

A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.

中文文档

Quick start

# recommended
yarn add react-images-viewer

or

npm install react-images-viewer --save

import React from "react";
import ImgsViewer from "react-images-viewer";

export default class Demo extends React.Component {
  render() {
    return (
      <ImgsViewer
        imgs={[
          { src: "http://example.com/img1.jpg" },
          { src: "http://example.com/img2.png" },
        ]}
        currImg={this.state.currImg}
        isOpen={this.state.viewerIsOpen}
        onClickPrev={this.gotoPrevious}
        onClickNext={this.gotoNext}
        onClose={this.closeViewer}
      />
    );
  }
}

Demo & Example

Live Demo: guonanci.github.io/react-images-viewer

yarn install
yarn
yarn start

Then open localhost:8000 in a browser.

Using srcSet

Example using srcSet:

<ImgsViewer
  imgs={IMG_SET}
  ...
/>

const IMG_SET = [
  {
    src: "http://example.com/img1.svg",
    caption: "A forest",
    // As an array
    srcSet: [
      "http://example.com/img1_1024.jpg 1024w",
      "http://example.com/img1_800.jpg 800w",
      "http://example.com/img1_500.jpg 500w",
      "http://example.com/img1_320.jpg 320w",
    ],
  },
  {
    src: "http://example.com/img2.svg",
    // As a string
    srcSet:
      "http://example.com/img2_1024.jpg 1024w, http://example.com/img2_800.jpg 800w, http://example.com/img2_500.jpg 500w, http://example.com/img2_320.jpg 320w",
  },
];

Options

Imgs Object