react-image-lightbox vs react-images vs react-photo-gallery vs yet-another-react-lightbox

Package	Downloads	Stars	Size	Issues	Publish	License
Package	Downloads	Stars	Size	Issues	Publish	License
react-image-lightbox	0	1,280	-	0	5 years ago	MIT
react-images	0	2,342	-	50	5 years ago	MIT
react-photo-gallery	0	2,010	-	80	7 years ago	MIT
yet-another-react-lightbox	0	1,233	237 kB	3	4 days ago	MIT

Package

Downloads

Stars

Size

Issues

Publish

License

react-image-lightbox

1,280

5 years ago

MIT

react-images

2,342

5 years ago

MIT

react-photo-gallery

2,010

7 years ago

MIT

yet-another-react-lightbox

1,233

237 kB

4 days ago

MIT

Lightbox Functionality

react-image-lightbox:
Provides a straightforward lightbox experience with basic features such as image navigation and close functionality, making it easy to implement and use.
react-images:
Offers a more enhanced lightbox experience with additional features like zooming and full-screen mode, allowing users to interact with images more dynamically.
react-photo-gallery:
Does not inherently provide lightbox functionality but can be easily integrated with other lightbox libraries for a comprehensive gallery experience.
yet-another-react-lightbox:
Delivers a powerful lightbox experience with support for images, videos, and custom content, along with advanced navigation options.

Customization

react-image-lightbox:
Customization options are limited, focusing on simplicity and ease of use, which may not suit all design needs.
react-images:
Allows for some level of customization, enabling developers to style the gallery and lightbox to fit their application's design.
react-photo-gallery:
Highly customizable, offering various layout options and the ability to control the rendering of images, making it suitable for unique design requirements.
yet-another-react-lightbox:
Extensive customization capabilities, allowing developers to tailor the lightbox's appearance and behavior to match their application's needs.

Performance

react-image-lightbox:
Lightweight and optimized for performance, making it suitable for projects where load time is critical.
react-images:
Performance is generally good, but may vary based on the number of images and features used; lazy loading can help improve performance.
react-photo-gallery:
Designed for performance with efficient rendering of images in a grid layout, ensuring a smooth user experience even with large galleries.
yet-another-react-lightbox:
Optimized for performance with features like lazy loading and efficient image handling, ensuring quick loading times and smooth interactions.

Ease of Use

react-image-lightbox:
Very easy to implement, making it ideal for developers looking for a quick solution without extensive configuration.
react-images:
User-friendly with a straightforward API, though it may require more setup than react-image-lightbox.
react-photo-gallery:
Requires more configuration and understanding of props, which may increase the learning curve for new developers.
yet-another-react-lightbox:
Offers a rich set of features but may have a steeper learning curve due to its extensive options and configurations.

Community and Support

react-image-lightbox:
Has a smaller community, which may result in limited support and resources available for troubleshooting.
react-images:
Moderate community support with some documentation and examples available, making it easier to find help when needed.
react-photo-gallery:
A larger community with good documentation, making it easier to find resources and support for implementation.
yet-another-react-lightbox:
Growing community and active development, providing ample resources and support for users.

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> ); } }

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

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	Works?
Chrome	Yes
Firefox	Yes
Safari	Yes
IE 11	Yes

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.

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

React Image and Lightbox Libraries

Npm Package Weekly Downloads Trend

Github Stars Ranking

Stat Detail

Feature Comparison: react-image-lightbox vs react-images vs react-photo-gallery vs yet-another-react-lightbox