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.