Examples

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.

Help

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.