1.7.1 • Published 2 years ago
react-images-viewer v1.7.1
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
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[] | string | undefined | Optional |
caption | str | undefined | Optional |
alt | str | undefined | Optional |
1.7.1
2 years ago
1.7.0
2 years ago
1.6.9
2 years ago
1.6.8
2 years ago
1.6.7
3 years ago
1.6.6
3 years ago
1.6.4
3 years ago
1.6.3
3 years ago
1.6.5
3 years ago
1.6.2
6 years ago
1.6.0
6 years ago
1.5.0
6 years ago
1.4.1
6 years ago
1.4.0
6 years ago
1.3.0
6 years ago
1.2.0
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.0.2
6 years ago