# React Image Lightbox [![NPM](https://nodei.co/npm/react-image-lightbox.png)](https://npmjs.org/package/react-image-lightbox) [![Build Status](https://github.com/frontend-collective/react-image-lightbox/actions/workflows/ci.yml/badge.svg)](https://github.com/frontend-collective/react-image-lightbox/actions?query=workflow%3ACI) [![Coverage Status](https://coveralls.io/repos/github/frontend-collective/react-image-lightbox/badge.svg?branch=master)](https://coveralls.io/github/frontend-collective/react-image-lightbox?branch=master) [![RIL Snapshot](https://user-images.githubusercontent.com/4413963/31209033-78f60df0-a9c3-11e7-8f83-69998d46973e.png)](https://frontend-collective.github.io/react-image-lightbox/) A flexible lightbox component for displaying images in a React project. [DEMO](https://frontend-collective.github.io/react-image-lightbox/) 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](https://github.com/webcarrot)!) ## Example ```jsx 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 (

{isOpen && ( this.setState({ isOpen: false })} onMovePrevRequest={() => this.setState({ photoIndex: (photoIndex + images.length - 1) % images.length, }) } onMoveNextRequest={() => this.setState({ photoIndex: (photoIndex + 1) % images.length, }) } /> )}

); } } ``` Play with the code on the [example on CodeSandbox](https://codesandbox.io/s/l9n3vnz8yz) ## 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`

			Stars	Issues	Version	Updated	Created	Size
	react-image-lightbox		1,290	0	5.1.4	3 years ago	9 years ago
	react-particle-image		460	13	1.0.2	2 years ago	5 years ago

react-image-lightbox vs react-particle-image

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past