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

``bash


recommended


yarn add react-images-viewer
`

or

`bash
npm install react-images-viewer --save
`

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

export default class Demo extends React.Component {
render() {
return (
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

`bash
yarn install
yarn
yarn start
`

Then open localhost:8000 in a browser.

$3

Example using srcSet:

`jsx
imgs={IMG_SET}
...
/>
`

`js
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

| Property | Type | Default | Description |
| :------------------ | :--------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------ |
| backdropCloseable | boolean | false | Allow users to exit the viewer by clicking the backdrop |
| closeBtnTitle | str | undefined | Customize close esc title |
| enableKeyboardInput | boolean | true | Supports keyboard input - space, esc, arrow left, arrow up, and arrow right, arrow down |
| currImg | number | 0 | Required if you want to navigate the imgsViewer, The index of the image to display initially |
| customControls | arr | undefined | An array of elements to display as custom controls on the top of viewer |
| imgs | arr | undefined | Required. Array of image objects, See img opts table below |
| imgCountSeparator | str | ' / ' | Customize separator in the image count |
| isOpen | boolean | false | Required if you want to navigate the imgsViewer, Whether or not the viewer is displayed |
| leftArrowTitle | str | undefined | Customize of left arrow title |
| onClickPrev | function | undefined | Required if you want to navigate the imgsViewer, and fired on request of the previous image |
| onClickNext | function | undefined | Required if you want to navigate the imgsViewer, and fired on request of the next image |
| onClose | function | undefined | Required if you want to close the imgsViewer, and handle closing of the viewer |
| onClickImg | function | undefined | Handle click on current image |
| onClickThumbnail | function | undefined | Handle click on thumbnail |
| preloadNextImg | boolean | true | Whether to preload the next available image |
| rightArrowTitle | str | undefined | Customize right arrow title |
| showCloseBtn | boolean | true | Optionally display a close 'X' button in top right corner |
| showImgCount | boolean | true | Optionally display image index, e.g., "2 of 20" |
| width | number | 1024 | Maximum width of the carousel; defaults to 1024px |
| spinnerDisabled | boolean | false | Disable Spinner |
| spinner | function | DefaultSpinner | Spinner component class |
| spinnerColor | str | '#fff' | Color of spinner |
| spinnerSize | number | 50 | Size of spinner |
| preventAutoScroll | boolean | true | Determines whether auto-scrolling is prevented |

Images Object

| Property | Type | Default | Description |
| :------- | :-------- | :---------- | :---------- |
| src | str | undefined | Required |
| srcSet | string[] | undefined | Optional |
| caption | str | undefined | Optional |
| alt | str | undefined` | Optional |