lightbox

Lightbox for components or images built for React

Oct 01, 2018
Lightbox for components or images built for React

lightbox-react

Lightbox for components or images built for React.

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.

View demo Download Source

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

Example

import React, { Component } from 'react'; import Lightbox from 'lightbox-react'; import 'lightbox-react/style.css'; // This only needs to be imported once in your app import VideoIframe from 'components/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> ); } }

Deprecation Notice

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

Options

PropertyTypeDefaultRequiredDescription
mainSrcstringyesMain display image url or React component
prevSrcstringPrevious display image url or component (displayed to the left). If left undefined, onMovePrevRequest will not be called, and the button not displayed
nextSrcstringNext display image url or component (displayed to the right). If left undefined, onMoveNextRequest will not be called, and the button not displayed
mainSrcThumbnailstringThumbnail image url corresponding to props.mainSrc. Displayed as a placeholder while the full-sized image loads.
prevSrcThumbnailstringThumbnail image url corresponding to props.prevSrc. Displayed as a placeholder while the full-sized image loads.
nextSrcThumbnailstringThumbnail image url corresponding to props.nextSrc. Displayed as a placeholder while the full-sized image loads.
onCloseRequestfuncyesClose window event. Should change the parent state such that the lightbox is not rendered
onMovePrevRequestfuncempty functionMove to previous image event. Should change the parent state such that props.prevSrc becomes props.mainSrc, props.mainSrc becomes props.nextSrc, etc.
onMoveNextRequestfuncempty functionMove to next image event. Should change the parent state such that props.nextSrc becomes props.mainSrc, props.mainSrc becomes props.prevSrc, etc.
onImageLoadErrorfuncempty functionCalled when an image fails to load.

<code>(imageSrc: string, srcType: string, errorEvent: object): void</code>
discourageDownloadsboolfalseEnable download discouragement (prevents [right-click -> Save Image As...])
animationDisabledboolfalseDisable all animation
animationOnKeyInputboolfalseDisable animation on actions performed with keyboard shortcuts
animationDurationnumber300Animation duration (ms)
keyRepeatLimitnumber180Required interval of time (ms) between key actions (prevents excessively fast navigation of images)
keyRepeatKeyupBonusnumber40Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images)
imageTitlenodeImage title (Descriptive element above image)
imageCaptionnodeImage caption (Descriptive element below image)
toolbarButtonsnode[]Array of custom toolbar buttons
reactModalStyleObject{}Set z-index style, etc., for the parent react-modal (react-modal style format)
imagePaddingnumber10Padding (px) between the edge of the window and the lightbox
clickOutsideToClosebooltrueWhen true, clicks outside of the image close the lightbox
enableZoombooltrueSet to false to disable zoom functionality and hide zoom buttons

Browser Compatibility

BrowserWorks?
ChromeYes
FirefoxYes
SafariYes
IE >= 10Yes
IE 9Everything works, but no animations

GitHub

Recommended