npmpackage.info

Gathering detailed insights and metrics for react-image-lightbox

Other packages similar to react-image-lightbox

yet-another-react-lightbox

3.23.2

Modern React lightbox component

@seafile/react-image-lightbox

4.0.2

A lightbox component for React.js

react-native-lightbox

0.8.1

Images etc in Full Screen Lightbox Popovers for React Native

react-image-video-lightbox

3.0.1

A React lightbox that supports videos, images and pinch zooming on images. Optimized for mobile UI with swiping, but can be used on desktop as well.

Gathering detailed insights and metrics for react-image-lightbox

react-image-lightbox - 5.1.4 | npmpackage.info

react-image-lightbox

React lightbox component

5.1.4

1,287

MIT

JavaScript

14.31 kB

32,113,485 3

Installations

npm install react-image-lightbox

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

15.3.0

NPM Version

7.0.14 Score

95.5

Supply Chain

95.7

Quality

77.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

540

Closed

472

Merged

68

Issues

Open

0

Total

161

Closed

161

Releases

v5.1.1

Updated on Aug 10, 2020

Style fixes

v4.0.0

Updated on May 28, 2017

Made mobile-friendly

v3.4.0

Updated on Dec 06, 2016

Add `onImageLoadError` callback

v3.3.0

Updated on Nov 28, 2016

Add Captions

v3.2.0

Updated on Nov 09, 2016

v3.1.0

Updated on Aug 20, 2016

View All 11 releases

Languages

JavaScript

CSS

Shell

JavaScript (65.24%)

CSS (34.45%)

Shell (0.31%)

Developer

frontend-collective

Download Statistics

Total Downloads

32,113,485

Last Day

4,171

Last Week

111,385

Last Month

491,940

Last Year

5,706,291

GitHub Statistics

MIT License

1,287 Stars

370 Commits

358 Forks

11 Watchers

28 Branches

27 Contributors

Updated on Jun 20, 2025

Bundle Size

53.92 kB

Minified

14.31 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 27 Contributors

Package Meta Information

Latest Version

5.1.4

Package Id

react-image-lightbox@5.1.4

Size

1.28 MB

NPM Version

7.0.14

Node Version

15.3.0

Published on

Jul 13, 2021

Total Downloads

Cumulative downloads

Total Downloads

32,113,485

Last Day

-8.8%

4,171

Compared to previous day

Last Week

-3.5%

111,385

Compared to previous week

Last Month

7.4%

491,940

Compared to previous month

Last Year

-3.1%

5,706,291

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

React Image Lightbox

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

1import React, { Component } from 'react';
2import Lightbox from 'react-image-lightbox';
3import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
4
5const images = [
6  '//placekitten.com/1500/500',
7  '//placekitten.com/4000/3000',
8  '//placekitten.com/800/1200',
9  '//placekitten.com/1500/1500',
10];
11
12export default class LightboxExample extends Component {
13  constructor(props) {
14    super(props);
15
16    this.state = {
17      photoIndex: 0,
18      isOpen: false,
19    };
20  }
21
22  render() {
23    const { photoIndex, isOpen } = this.state;
24
25    return (
26      <div>
27        <button type="button" onClick={() => this.setState({ isOpen: true })}>
28          Open Lightbox
29        </button>
30
31        {isOpen && (
32          <Lightbox
33            mainSrc={images[photoIndex]}
34            nextSrc={images[(photoIndex + 1) % images.length]}
35            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
36            onCloseRequest={() => this.setState({ isOpen: false })}
37            onMovePrevRequest={() =>
38              this.setState({
39                photoIndex: (photoIndex + images.length - 1) % images.length,
40              })
41            }
42            onMoveNextRequest={() =>
43              this.setState({
44                photoIndex: (photoIndex + 1) % images.length,
45              })
46            }
47          />
48        )}
49      </div>
50    );
51  }
52}

Play with the code on the example on CodeSandbox

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

Browser Compatibility

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.

1# Starts a webpack dev server that hosts a demo page with the lightbox.
2# It uses react-hot-loader so changes are reflected on save.
3npm start
4
5# Lints the code with eslint and my custom rules.
6yarn run lint
7
8# Lints and builds the code, placing the result in the dist directory.
9# This build is necessary to reflect changes if you're
10#  `npm link`-ed to this repository from another local project.
11yarn run build

Pull requests are welcome!

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

48 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

3

/10

Last Scanned on 2025-06-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-image-lightbox

Other packages similar to react-image-lightbox

react-image-lightbox

Installations

Developer Guide

No

CommonJS

15.3.0

7.0.14

Score

Pull Requests

0

540

472

68

Issues

0

161

161

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

53.92 kB

14.31 kB

Maintainers

Package Meta Information

Total Downloads

32,113,485

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Image Lightbox

Example

Options

Browser Compatibility

Contributing

License

10

10

10

2

0

0

0

0

0

0

0

0

3

/10