React Image Lightbox
A flexible lightbox component for displaying images in a React project.
DEMO
Features
- Keyboard shortcuts (with rate limiting)
- Image Zoom
- Flexible rendering using src values assigned on the fly
- Image preloading for smoother viewing
- Mobile friendly, with pinch to zoom and swipe (Thanks, @webcarrot!)
Example
import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';
const images = [
'//placekitten.com/1500/500',
'//placekitten.com/4000/3000',
'//placekitten.com/800/1200',
'//placekitten.com/1500/1500',
];
export default class LightboxExample extends Component {
constructor(props) {
super(props);
this.state = {
photoIndex: 0,
isOpen: false,
};
}
render() {
const { photoIndex, isOpen } = this.state;
return (
<div>
<button type="button" onClick={() => this.setState({ isOpen: true })}>
Open Lightbox
</button>
{isOpen && (
<Lightbox
mainSrc={images[photoIndex]}
nextSrc={images[(photoIndex + 1) % images.length]}
prevSrc={images[(photoIndex + images.length - 1) % images.length]}
onCloseRequest={() => this.setState({ isOpen: false })}
onMovePrevRequest={() =>
this.setState({
photoIndex: (photoIndex + images.length - 1) % images.length,
})
}
onMoveNextRequest={() =>
this.setState({
photoIndex: (photoIndex + 1) % images.length,
})
}
/>
)}
</div>
);
}
}
Play with the code on the example on CodeSandbox
Options
Property | Type | Description |
---|
mainSrc (required) | string | Main display image url |
prevSrc | string | Previous display image url (displayed to the left). If left undefined, onMovePrevRequest will not be called, and the button not displayed |
nextSrc | string | Next display image url (displayed to the right). If left undefined, onMoveNextRequest will not be called, and the button not displayed |
mainSrcThumbnail | string | Thumbnail image url corresponding to props.mainSrc . Displayed as a placeholder while the full-sized image loads. |
prevSrcThumbnail | string | Thumbnail image url corresponding to props.prevSrc . Displayed as a placeholder while the full-sized image loads. |
nextSrcThumbnail | string | Thumbnail image url corresponding to props.nextSrc . Displayed as a placeholder while the full-sized image loads. |
onCloseRequest (required) | func | Close window event. Should change the parent state such that the lightbox is not rendered |
onMovePrevRequest | func | Move to previous image event. Should change the parent state such that props.prevSrc becomes props.mainSrc , props.mainSrc becomes props.nextSrc , etc. |
onMoveNextRequest | func | Move to next image event. Should change the parent state such that props.nextSrc becomes props.mainSrc , props.mainSrc becomes props.prevSrc , etc. |
onImageLoad | func | Called when an image loads. (imageSrc: string, srcType: string, image: object): void
|
onImageLoadError | func | Called when an image fails to load. (imageSrc: string, srcType: string, errorEvent: object): void
|
imageLoadErrorMessage | node | What is rendered in place of an image if it fails to load. Centered in the lightbox viewport. Defaults to the string "This image failed to load" . |
onAfterOpen | func | Called after the modal has rendered. |
discourageDownloads | bool | When true , enables download discouragement (preventing [right-click -> Save Image As...]). Defaults to false . |
animationDisabled | bool | When true , image sliding animations are disabled. Defaults to false . |
animationOnKeyInput | bool | When true , sliding animations are enabled on actions performed with keyboard shortcuts. Defaults to false . |
animationDuration | number | Animation duration (ms). Defaults to 300 . |
keyRepeatLimit | number | Required interval of time (ms) between key actions (prevents excessively fast navigation of images). Defaults to 180 . |
keyRepeatKeyupBonus | number | Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images). Defaults to 40 . |
imageTitle | node | Image title (Descriptive element above image) |
imageCaption | node | Image caption (Descriptive element below image) |
imageCrossOrigin | string | crossorigin attribute to append to img elements (MDN documentation) |
toolbarButtons | node[] | Array of custom toolbar buttons |
reactModalStyle | Object | Set z-index style, etc., for the parent react-modal (react-modal style format) |
reactModalProps | Object | Override props set on react-modal (https://github.com/reactjs/react-modal) |
imagePadding | number | Padding (px) between the edge of the window and the lightbox. Defaults to 10 . |
clickOutsideToClose | bool | When true , clicks outside of the image close the lightbox. Defaults to true . |
enableZoom | bool | Set to false to disable zoom functionality and hide zoom buttons. Defaults to true . |
wrapperClassName | string | Class name which will be applied to root element after React Modal |
nextLabel | string | aria-label and title set on the 'Next' button. Defaults to 'Next image' . |
prevLabel | string | aria-label and title set on the 'Previous' button. Defaults to 'Previous image' . |
zoomInLabel | string | aria-label and title set on the 'Zoom In' button. Defaults to 'Zoom in' . |
zoomOutLabel | string | aria-label and title set on the 'Zoom Out' button. Defaults to 'Zoom out' . |
closeLabel | string | aria-label and title set on the 'Close Lightbox' button. Defaults to 'Close lightbox' . |
loader | node | Custom Loading indicator for loading |
Browser Compatibility
Browser | Works? |
---|
Chrome | Yes |
Firefox | Yes |
Safari | Yes |
IE 11 | Yes |
Contributing
After cloning the repository and running npm install
inside, you can use the following commands to develop and build the project.
npm start
yarn run lint
yarn run build
Pull requests are welcome!
License
MIT