Getting Started
1. Install using yarn:
yarn add react-images-viewer
… or npm:
npm install react-images-viewer --save
2. Example usage with JSX:
<ImgsViewer
imgs={[
{ src: '../images/photo-1.jpg' },
{ src: '../images/photo-2.jpg' }
]}
isOpen={this.state.isOpen}
onClickPrev={this.gotoPrevImg}
onClickNext={this.gotoNextImg}
onClose={this.closeImgsViewer}
/>
Options
| Property | Type | Default | Description |
| backdropCloseable | bool | false | Allow users to exit the imgsViewer by clicking the backdrop |
| currImg | number | 0 | The index of the image to display initially |
| customControls | array | undefined | An array of elements to display as custom controls on the top of imgsViewer |
| enableKeyboardInput | bool | true | Supports keyboard input - space, esc, arrow left, arrow up, and arrow right, arrow down |
| imgs | array | undefined | Required. An array of objects containing valid src and srcset values of img element |
| imgCountSeparator | string | ' / ' | Custom separator for the image count |
| isOpen | bool | false | Whether or not the imgsViewer is displayed |
| onClickPrev | func | undefined | Fired on request of the previous image |
| onClickNext | func | undefined | Fired on request of the next image |
| onClickImg | func | undefined | Handle click event on the current image |
| onClickThumbnail | func | undefined | Handle click on thumbnail |
| onClose | func | undefined | Required. Handle closing of the imgsViewer |
| preloadNextImg | bool | true | Whether to preload the next available image. |
| preventAutoScroll | bool | true | Determines whether auto-scrolling is prevented |
| showCloseBtn | bool | true | Optionally display a close "X" button in top right corner |
| showImgCount | bool | true | Optionally display image index, e.g., "3 of 20" |
| showThumbnails | bool | false | Optionally display thumbnails beneath the imgsViewer |
| theme | object | undefined | Pass through styles to theme each component; arrow, container, etc. |
| width | number | 1024 | Maximum width of the carousel; defaults to 1024px |
Images
| Property | Type | Default | Description |
| src | str | undefined | Required. The primary image path |
| srcset | arr | undefined | List of alternative image sizes |
| caption | str | undefined | Displayed benath the current image. Great for description or attribution |
| thumbnail | str | undefined | Thumbnail to display if showThumbnails is set to true |
License
React Images Viewer is free to use for personal and commercial projects under the MIT license.
Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.