Getting Started
1. Install using yarn:
yarn add react-images-extended
… or npm:
npm install react-images-extended --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}
rotatable={true}
zoomable={true}
onSave={(currentImageIndex, params) => console.log('currentImageIndex, currentImageSrc, params : ', currentImageIndex, this.props.images[currentImageIndex].src, params)}
/>
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 |
| onSave | func | undefined | Show save button and handle click / params : currentImageIndex, {rotation, zoom} |
| preloadNextImage | bool | true | Based on the direction the user is navigating, preload the next available image. |
| preventScroll | bool | true | Determines whether scrolling is prevented |
| rotatable | bool | false | Show rotate buttons |
| 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 |
| zoomable | bool | false | Show zoom buttons |
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 |
| initialZoom | number | 1 | Initial zoom level for showing the image |
| initialRotation | number | 0 | Initial rotation angle for showing the image |
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.