Gathering detailed insights and metrics for react-images-viewer
Gathering detailed insights and metrics for react-images-viewer
A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.
Installations
npm install react-images-viewerDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
17.0.1
NPM Version
8.3.0
Score
80.5
Supply Chain
95.7
Quality
74.7
Maintenance
100
Vulnerability
99.6
License
Releases
6
Languages
2
JavaScript
Shell
JavaScript (99.54%)
Shell (0.46%)
Developer
Download Statistics
Total Downloads
1,157,119
Last Day
133
Last Week
5,679
Last Month
24,128
Last Year
300,088
GitHub Statistics
MIT License
165 Stars
189 Commits
41 Forks
2 Watchers
6 Branches
3 Contributors
Updated on Jun 14, 2025
Bundle Size
94.02 kB
Minified
25.48 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.7.1
Package Id
react-images-viewer@1.7.1
Unpacked Size
209.32 kB
Size
46.34 kB
File Count
63
NPM Version
8.3.0
Node Version
17.0.1
Total Downloads
Cumulative downloads
Total Downloads
1,157,119
Last Day
2.3%
133
Compared to previous day
Last Week
1.4%
5,679
Compared to previous week
Last Month
5.2%
24,128
Compared to previous month
Last Year
-5.2%
300,088
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
41
babelbabel-clibabel-corebabel-eslintbabel-jestbabel-loaderbabel-plugin-external-helpersbabel-plugin-transform-object-assignbabel-plugin-transform-object-rest-spreadbabel-plugin-transform-react-remove-prop-typesbabel-preset-envbabel-preset-reactcoverallscss-loaderenzymeenzyme-adapter-react-16eslinteslint-plugin-reacthtml-loaderhtml-webpack-pluginjestjest-clilessless-loadermini-css-extract-pluginnpsnps-utilsreactreact-domreact-test-rendererregenerator-runtimerolluprollup-plugin-babelrollup-plugin-commonjsrollup-plugin-node-resolverollup-plugin-uglifystyle-loaderuglify-eswebpackwebpack-cliwebpack-dev-server
react-images-viewer
A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.
Quick start
1# recommended 2yarn add react-images-viewer
or
1npm install react-images-viewer --save
1import React from "react"; 2import ImgsViewer from "react-images-viewer"; 3 4export default class Demo extends React.Component { 5 render() { 6 return ( 7 <ImgsViewer 8 imgs={[ 9 { src: "http://example.com/img1.jpg" }, 10 { src: "http://example.com/img2.png" }, 11 ]} 12 currImg={this.state.currImg} 13 isOpen={this.state.viewerIsOpen} 14 onClickPrev={this.gotoPrevious} 15 onClickNext={this.gotoNext} 16 onClose={this.closeViewer} 17 /> 18 ); 19 } 20}
Demo & Example
Live Demo: guonanci.github.io/react-images-viewer
1yarn install 2yarn 3yarn start
Then open localhost:8000 in a browser.
Using srcSet
Example using srcSet:
1<ImgsViewer 2 imgs={IMG_SET} 3 ... 4/>
1const IMG_SET = [ 2 { 3 src: "http://example.com/img1.svg", 4 caption: "A forest", 5 // As an array 6 srcSet: [ 7 "http://example.com/img1_1024.jpg 1024w", 8 "http://example.com/img1_800.jpg 800w", 9 "http://example.com/img1_500.jpg 500w", 10 "http://example.com/img1_320.jpg 320w", 11 ], 12 }, 13 { 14 src: "http://example.com/img2.svg", 15 // As a string 16 srcSet: 17 "http://example.com/img2_1024.jpg 1024w, http://example.com/img2_800.jpg 800w, http://example.com/img2_500.jpg 500w, http://example.com/img2_320.jpg 320w", 18 }, 19];
Options
| Property | Type | Default | Description |
|---|---|---|---|
| backdropCloseable | boolean | false | Allow users to exit the viewer by clicking the backdrop |
| closeBtnTitle | str | undefined | Customize close esc title |
| enableKeyboardInput | boolean | true | Supports keyboard input - space, esc, arrow left, arrow up, and arrow right, arrow down |
| currImg | number | 0 | Required if you want to navigate the imgsViewer, The index of the image to display initially |
| customControls | arr | undefined | An array of elements to display as custom controls on the top of viewer |
| imgs | arr | undefined | Required. Array of image objects, See img opts table below |
| imgCountSeparator | str | ' / ' | Customize separator in the image count |
| isOpen | boolean | false | Required if you want to navigate the imgsViewer, Whether or not the viewer is displayed |
| leftArrowTitle | str | undefined | Customize of left arrow title |
| onClickPrev | function | undefined | Required if you want to navigate the imgsViewer, and fired on request of the previous image |
| onClickNext | function | undefined | Required if you want to navigate the imgsViewer, and fired on request of the next image |
| onClose | function | undefined | Required if you want to close the imgsViewer, and handle closing of the viewer |
| onClickImg | function | undefined | Handle click on current image |
| onClickThumbnail | function | undefined | Handle click on thumbnail |
| preloadNextImg | boolean | true | Whether to preload the next available image |
| rightArrowTitle | str | undefined | Customize right arrow title |
| showCloseBtn | boolean | true | Optionally display a close 'X' button in top right corner |
| showImgCount | boolean | true | Optionally display image index, e.g., "2 of 20" |
| width | number | 1024 | Maximum width of the carousel; defaults to 1024px |
| spinnerDisabled | boolean | false | Disable Spinner |
| spinner | function | DefaultSpinner | Spinner component class |
| spinnerColor | str | '#fff' | Color of spinner |
| spinnerSize | number | 50 | Size of spinner |
| preventAutoScroll | boolean | true | Determines whether auto-scrolling is prevented |
Images Object
| Property | Type | Default | Description |
| :------- | :-------- | :---------- | :---------- | -------- |
| src | str | undefined | Required |
| srcSet | string[] | string | undefined | Optional |
| caption | str | undefined | Optional |
| alt | str | undefined | Optional |
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 2/10 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
100 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-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- 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-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- 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-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- 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-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- 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-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-vvj3-85vf-fgmw
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Score
2
/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