Getting Started
1. Install using yarn:
yarn add react-images
… or npm:
npm install react-images --save
2. Example usage with JSX:
<Lightbox
images={[
{ src: '../images/photo-1.jpg' },
{ src: '../images/photo-2.jpg' }
]}
isOpen={this.state.lightboxIsOpen}
onClickPrev={this.gotoPrevLightboxImage}
onClickNext={this.gotoNextLightboxImage}
onClose={this.closeLightbox}
/>
Options
| Property |
Type |
Default |
Description |
| backdropClosesModal |
bool |
false |
Allow users to exit the lightbox by clicking the backdrop |
| currentImage |
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 lightbox |
| enableKeyboardInput |
bool |
true |
Supports keyboard input - esc, arrow left, and arrow right |
| images |
array |
undefined |
Required. An array of objects containing valid src and srcset values of img element |
| imageCountSeparator |
string |
' of ' |
Custom separator for the image count |
| isOpen |
bool |
false |
Whether or not the lightbox is displayed |
| onClickPrev |
func |
undefined |
Fired on request of the previous image |
| onClickNext |
func |
undefined |
Fired on request of the next image |
| onClickImage |
func |
undefined |
Handle click event on the current image |
| onClickThumbnail |
func |
undefined |
Handle click on thumbnail |
| onClose |
func |
undefined |
Required. Handle closing of the lightbox |
| preloadNextImage |
bool |
true |
Based on the direction the user is navigating, preload the next available image. |
| preventScroll |
bool |
true |
Determines whether scrolling is prevented |
| showCloseButton |
bool |
true |
Optionally display a close "X" button in top right corner |
| showImageCount |
bool |
true |
Optionally display image index, e.g., "3 of 20" |
| showThumbnails |
bool |
false |
Optionally display thumbnails beneath the Lightbox |
| 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 |
string |
undefined |
Required. The primary image path |
| srcset |
array |
undefined |
List of alternative image sizes |
| caption |
string |
undefined |
Displayed benath the current image. Great for description or attribution |
| thumbnail |
string |
undefined |
Thumbnail to display if showThumbnails is set to true |
License
React Images 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.