React-Images

Examples

Getting Started

1. Install using 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
onClose	func	undefined	Required. Handle closing of the lightbox
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"
width	number	900	Maximum width of the carousel; defaults to 900px

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.