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
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',
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',
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 | bool | false | Allow users to exit the viewer by clicking the backdrop |
closeBtnTitle | str | '关闭(空格键)' | Customize close esc title |
enableKeyboardInput | bool | true | Supports keyboard input - space, esc , arrow left, arrow up , and arrow right, arrow down |
currImg | num | 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 | bool | false | Required if you want to navigate the imgsViewer, Whether or not the viewer is displayed |
leftArrowTitle | str | '上一张(左箭头)' | Customize of left arrow title |
onClickPrev | func | undefined | Required if you want to navigate the imgsViewer, and fired on request of the previous image |
onClickNext | func | undefined | Required if you want to navigate the imgsViewer, and fired on request of the next image |
onClose | func | undefined | Required if you want to close the imgsViewer, and handle closing of the viewer |
onClickImg | func | undefined | Handle click on current image |
onClickThumbnail | func | undefined | Handle click on thumbnail |
preloadNextImg | bool | true | Whether to preload the next available image |
rightArrowTitle | str | '下一张(右箭头)' | Customize right arrow title |
showCloseBtn | bool | true | Optionally display a close 'X' button in top right corner |
showImgCount | bool | true | Optionally display image index, e.g., "2 of 20" |
width | number | 1024 | Maximum width of the carousel; defaults to 1024px |
spinner | func | DefaultSpinner | Spinner component class |
spinnerColor | str | '#fff' | Color of spinner |
spinnnerSize | num | 50 | Size of spinner |
preventAutoScroll | bool | true | Determines whether auto-scrolling is prevented |
Imgs Object
Property | Type | Default | Description |
---|
src | str | undefined | Required |
srcSet | arr of str or str | undefined | Optional |
caption | str | undefined | Optional |
alt | str | undefined | Optional |