react-image-lightbox

React lightbox component

Showing:

Popularity

Downloads/wk

116K

GitHub Stars

1.1K

Maintenance

Last Commit

3mos ago

Contributors

38

Package

Dependencies

2

Size (min+gzip)

14.7KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Reviews

Average Rating

3.0/54
Read All Reviews
s-r-aman
nunhes
khangahs

Top Feedback

3Easy to Use
1Poor Documentation
1Hard to Use
1Buggy

Readme

React Image Lightbox

NPM Build Status Coverage Status

RIL Snapshot

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'; // This only needs to be imported once in your app

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

PropertyTypeDescription
mainSrc
(required)
stringMain display image url
prevSrcstringPrevious display image url (displayed to the left). If left undefined, onMovePrevRequest will not be called, and the button not displayed
nextSrcstringNext display image url (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.
onCloseRequest
(required)
funcClose window event. Should change the parent state such that the lightbox is not rendered
onMovePrevRequestfuncMove to previous image event. Should change the parent state such that props.prevSrc becomes props.mainSrc, props.mainSrc becomes props.nextSrc, etc.
onMoveNextRequestfuncMove to next image event. Should change the parent state such that props.nextSrc becomes props.mainSrc, props.mainSrc becomes props.prevSrc, etc.
onImageLoadfuncCalled when an image loads.
(imageSrc: string, srcType: string, image: object): void
onImageLoadErrorfuncCalled when an image fails to load.
(imageSrc: string, srcType: string, errorEvent: object): void
imageLoadErrorMessagenodeWhat 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".
onAfterOpenfuncCalled after the modal has rendered.
discourageDownloadsboolWhen true, enables download discouragement (preventing [right-click -> Save Image As...]). Defaults to false.
animationDisabledboolWhen true, image sliding animations are disabled. Defaults to false.
animationOnKeyInputboolWhen true, sliding animations are enabled on actions performed with keyboard shortcuts. Defaults to false.
animationDurationnumberAnimation duration (ms). Defaults to 300.
keyRepeatLimitnumberRequired interval of time (ms) between key actions (prevents excessively fast navigation of images). Defaults to 180.
keyRepeatKeyupBonusnumberAmount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images). Defaults to 40.
imageTitlenodeImage title (Descriptive element above image)
imageCaptionnodeImage caption (Descriptive element below image)
imageCrossOriginstringcrossorigin attribute to append to img elements (MDN documentation)
toolbarButtonsnode[]Array of custom toolbar buttons
reactModalStyleObjectSet z-index style, etc., for the parent react-modal (react-modal style format)
reactModalPropsObjectOverride props set on react-modal (https://github.com/reactjs/react-modal)
imagePaddingnumberPadding (px) between the edge of the window and the lightbox. Defaults to 10.
clickOutsideToCloseboolWhen true, clicks outside of the image close the lightbox. Defaults to true.
enableZoomboolSet to false to disable zoom functionality and hide zoom buttons. Defaults to true.
wrapperClassNamestringClass name which will be applied to root element after React Modal
nextLabelstringaria-label and title set on the 'Next' button. Defaults to 'Next image'.
prevLabelstringaria-label and title set on the 'Previous' button. Defaults to 'Previous image'.
zoomInLabelstringaria-label and title set on the 'Zoom In' button. Defaults to 'Zoom in'.
zoomOutLabelstringaria-label and title set on the 'Zoom Out' button. Defaults to 'Zoom out'.
closeLabelstringaria-label and title set on the 'Close Lightbox' button. Defaults to 'Close lightbox'.
loadernodeCustom Loading indicator for loading

Browser Compatibility

BrowserWorks?
ChromeYes
FirefoxYes
SafariYes
IE 11Yes

Contributing

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.
yarn 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.
yarn run build

Pull requests are welcome!

License

MIT

Rate & Review

Great Documentation0
Easy to Use3
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation1
Hard to Use1
Slow0
Buggy1
Abandoned0
Unwelcoming Community0
100
SR AmanNew Delhi, India88 Ratings93 Reviews
Trying new things.
2 months ago
Easy to Use

Has saved me so many times. Such a great library for me, I have used this numerous times in my freelancing projects. A great library to work on. Supports mobile too, the swipe gestures. And zoom in and zoom out. Whenever any client needed tos how image gallery, they would ask for to open image too. I would just plug this component and voila. Its great. The hard part can be customizing it. But I never really got into it. Your mileage may vary. But this is way easier than anything else I have tried earlier. Would definitely recommend.


1
Yogi-Kmr
nunhesVigo, Spain1 Rating1 Review
​​I´m a web/graphic designer experienced in corporate identity developement, information architecture, UI/UX, web desing and programming...
9 months ago
Easy to Use

This libraries resolve a big problem to me. I use it on a development exercise. I´m a novice, then my opinion can be unnecessary ;)


0
khangahsSomewhere on Earth8 Ratings1 Review
Playing with life ~~~
10 months ago
Poor Documentation
Hard to Use
Buggy

Very outdated guide with no functional component supported. It seems like the package is abandon by its creator....


0
Rob van der LeekThe Netherlands3 Ratings0 Reviews
print("Hello Internet 👋")
3 months ago
Evgeniy ZabludaRussia, Vladivostok4 Ratings0 Reviews
Frontend-developer
8 months ago
Easy to Use

Alternatives

pure-react-carouselA highly impartial suite of React components that can be assembled by the consumer to create a carousel with almost no limits on DOM structure or CSS styles. If you're tired of fighting some other developer's CSS and DOM structure, this carousel is for you.
User RatingN/A
Top Feedback
1Performant
1Highly Customizable
1Bleeding Edge
GitHub Stars
1K
Weekly Downloads
71K
rsc
react-slick-carouselReact carousel component
User RatingN/A
Top Feedback
N/A
GitHub Stars
3
Weekly Downloads
306
rs
react-slickReact carousel component
User Rating
4.1/ 5
31
Top Feedback
21Great Documentation
20Easy to Use
19Buggy
GitHub Stars
10K
Weekly Downloads
817K
@brainhubeu/react-carouselA pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)
User Rating
3.7/ 5
6
Top Feedback
5Great Documentation
4Easy to Use
3Performant
GitHub Stars
956
Weekly Downloads
24K
rac
react-alice-carousel React responsive component for building content galleries, content rotators and any React carousels
User Rating
4.4/ 5
7
Top Feedback
1Great Documentation
1Easy to Use
1Responsive Maintainers
GitHub Stars
515
Weekly Downloads
32K
See 23 Alternatives

Tutorials

No tutorials found
Add a tutorial