Getting Started

1. Install using yarn:

yarn add react-images-viewer

… or npm:

npm install react-images-viewer --save

2. Example usage with JSX:

      { src: '../images/photo-1.jpg' },
      { src: '../images/photo-2.jpg' }


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


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


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.


Have a question?

Follow the quick start guide on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.

Found a bug?

If you find a bug, please read the Contribution Guildelines before you report the issue.