Code and Docs on GitHub Star

## 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.