npmpackage.info

Gathering detailed insights and metrics for images-viewer-react

Other packages similar to images-viewer-react

react-images-viewer

1.7.1

Create an react-images-viewer component.

react-pdf

10.0.1

Display PDFs in your React app as easily as if they were images.

@haz3l/react-images-viewer

18.0.1

Create an react-images-viewer component.

react-wx-images-viewer

1.0.6

Images viewer is a react component use in mobile website App, that function same as Weixin native viewer.

Gathering detailed insights and metrics for images-viewer-react

images-viewer-react - 1.5.2 | npmpackage.info

images-viewer-react

Multi - picture preview, support zooming, rotating, fast switching

1.5.2

TypeScript

1.07 MB

1.3

Installations

npm install images-viewer-react

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.15.1

NPM Version

6.14.8 Pull Requests

Open

0

Total

16

Closed

0

Merged

16

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

Less

TypeScript (83.57%)

JavaScript (9.49%)

Less (6.95%)

Developer

candy-girl

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

6 Stars

121 Commits

1 Forks

1 Watchers

2 Branches

2 Contributors

Updated on Dec 26, 2023

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

1.5.2

Package Id

images-viewer-react@1.5.2

Unpacked Size

1.07 MB

Size

355.46 kB

File Count

NPM Version

6.14.8

Node Version

14.15.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@babel/runtime-corejs3 classnames react-pdf react-to-print

Dev Dependencies

@babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @commitlint/cli @commitlint/config-conventional @types/classnames @types/jest @types/node @types/react @types/react-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser antd autoprefixer babel-jest babel-loader babel-plugin-import copy-webpack-plugin css-loader cz-conventional-changelog enzyme enzyme-adapter-react-16 enzyme-to-json eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react file-loader fs-extra gh-pages gulp gulp-typescript html-webpack-plugin husky identity-obj-proxy jest jest-environment-jsdom jest-environment-jsdom-global jest-static-stubs less less-loader lint-staged merge2 mini-css-extract-plugin postcss-loader prettier react react-dom react-test-render style-loader through2 ts-jest ts-loader typescript url-loader webpack webpack-bundle-analyzer webpack-chain webpack-cli webpack-dev-server wolfy87-eventemitter

多图/pdf 预览组件

react image viewers.

简介

因为需要支持图片和 pdf 的预览、放大、缩小、折叠、打印下载等功能，所以写了这个组件

安装

react >= 16.8.0 | react-dom >= 16.8.0

1npm install images-viewer-react --save

使用方法

1import * as React from 'react'
2import Viewer from 'images-viewer-react'
3
4function App() {
5  const [visible, setVisible] = React.useState(false)
6
7  return (
8    <div>
9      <button
10        onClick={() => {
11          setVisible(true)
12        }}
13      >
14        show
15      </button>
16      <Viewer
17        visible={visible}
18        onClose={() => {
19          setVisible(false)
20        }}
21        images={[{ src: '', alt: '' }]}
22      />
23    </div>
24  )
25}

参数

props	type	default	description	required
visible	string	false	是否显示	true
onClose	function	-	关闭预览窗口函数	true
images	ImageDecorator[]	[]	预览的图片数组	true
activeIndex	number	0	当前预览图片的 index	false
zIndex	number	1000	预览图片的时候 zIndex	false
container	HTMLElement	null	inline 模式的容器	false
drag	boolean	true	拖拽图片的回调	false
attribute	boolean	true	是否显示图片属性	false
zoomable	boolean	true	是否显示缩放按钮	false
rotatable	boolean	true	是否显示旋转按钮	false
scalable	boolean	true	是否显示缩放按钮	false
onMaskClick	(e) => void	-	当蒙版被点击时的回调函数	false
downloadable	boolean	false	是否显示下载按钮	false
noClose	boolean	false	是否隐藏关闭按钮	false
noNavbar	boolean	false	是否隐藏导航条	false
noToolbar	boolean	false	是否隐藏工具栏	false
noImgDetails	boolean	false	是否隐藏图片详情(width/height)	false
noFooter	boolean	false	是否隐藏不呈现页脚	false
changeable	boolean	true	是否隐藏更改按钮	false
customToolbar	(defaultToolbarConfigs: ToolbarConfig[]) => ToolbarConfig[]	-	自定义工具栏	false
zoomSpeed	number	0.05	变焦速度	false
defaultSize	ViewerImageSize	-	默认图片大小	false
defaultImg	viewerdefaultimg	-	如果图片加载失败显示的默认图片	false
disableKeyboardSupport	boolean	false	禁用键盘支持	false
noResetZoomAfterChange	boolean	false	没有复位变焦后的图像变化	false
noLimitInitializationSize	boolean	false	没有限制图像初始化大小	false
defaultScale	number	1	默认的放大缩小倍数	false
onChange	(activeImage: ImageDecorator, index: number) => void	-	当图片改变时回调的回调	false
onPreButton	() => void	-	点击上一张(当 activeIndex<5>)	false
onNextButton	() => void	-	点击下一张(当 activeIndex>images.length-5	false
loop	boolean	true	导航条是否允许图片可循环	false
disableMouseZoom	boolean	false	是否禁用鼠标滚动缩放图片大小	false
downloadInNewWindow	boolean	false	是否在新窗口中下载	false
className	string	-	自定义样式名	false
showTotal	boolean	true	是否显示总数和范围	false
maxScale	number	-	最大缩放	false
minScale	number	0.1	最小缩放	false

图片资源相关参数

props	type	default	description	required
src	string	-	图片资源	true
alt	string	-	图片描述	false
downloadUrl	string	-	图片下载的地址	false
defaultSize	ViewerImageSize	-	图片大小	false

预览图片的大小

props	type	default	description	required
width	number	-	图片宽度	true
height	number	-	图片高度	true

默认图片相关属性

props	type	default	description	required
src	number	-	图片资源	true
width	number	-	图片宽度	false
height	number	-	图片高度	false

工具栏配置

props	type	default	description	required
key	string	-	对应的 key	true
render	React.ReactNode	-	工具 render 的内容	false
onClick	function	-	点击时候的回调	false

键盘按钮支持

Esc: 关闭预览的视图.
←: 查看上一张.
→: 查看下一张.
↑: 放大图片.
↓: 缩小图片.
Ctrl + 1: 重置图片或者 pdf 资源.
Ctrl + ←: 图片左旋转.
Ctrl + →: 图片又旋转.

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

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

0

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

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

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

112 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-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
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-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-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
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-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
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-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-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-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
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-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-897m-rjf5-jp39
Warn: Project is vulnerable to: GHSA-q8pj-2vqx-8ggc
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
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-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
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-wgrm-67xf-hhpq
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-87hq-q4gp-9wr4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
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-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

1.3

/10

Last Scanned on 2025-07-14

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