A lightbox for React components or images. String passed as arguments are assumed to be the src for an image. Otherwise, it will check if the argument is able to be rended as a child React component of the lightbox.
Originally forked from fritz-c's library
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!)
- No external CSS
import React, { Component } from 'react';
import Lightbox from 'lightbox-react';
import VideoIframe from 'components/cat-video';
const images = [
VideoIframe,
'//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>
);
}
}All unprefixed classes (listed below) will be removed in v4.0.0. Use their ril- prefixed alternatives instead. close, closing, download-blocker, image-current, image-next, image-prev, inner, next-button, not-loaded, outer, prev-button, toolbar, toolbar-left, toolbar-right, zoom-in, zoom-out
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| mainSrc | string | yes | Main display image url or React component | |
| prevSrc | string | Previous display image url or component (displayed to the left). If left undefined, onMovePrevRequest will not be called, and the button not displayed |
||
| nextSrc | string | Next display image url or component (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 | func | yes | Close window event. Should change the parent state such that the lightbox is not rendered | |
| onMovePrevRequest | func | empty function | 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 | empty function | Move to next image event. Should change the parent state such that props.nextSrc becomes props.mainSrc, props.mainSrc becomes props.prevSrc, etc. |
|
| onImageLoadError | func | empty function | Called when an image fails to load. |
(imageSrc: string, srcType: string, errorEvent: object): void
| Browser | Works? |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| IE >= 10 | Yes |
| IE 9 | Everything works, but no animations |
After cloning the repository and running npm install inside, you can use the following commands to develop and build the project.
# Starts a webpack dev server that hosts a demo page with the lightbox.
# It uses react-hot-loader so changes are reflected on save.
npm start
# Lints the code with eslint and my custom rules.
npm run lint
# Lints and builds the code, placing the result in the dist directory.
# This build is necessary to reflect changes if you're
# `npm link`-ed to this repository from another local project.
npm run buildPull requests are welcome!
MIT