react-viewer-mda
react image viewer.
Introduction
Because i can`t comfortable use viewerjs in react, so i create react-viewer to replace it. This is a fork of react-viewer.
v2.2.5
- Added
downloadable
option to image download. - Hide navigation arrows when shows only one image.
v2.2.6
- Added afterChange property.
- Disable apropriate keyboard shortcuts when
zoomable
androtatable
is set tofalse
.
Installation
npm install react-viewer-mda --save
Usage
;;; Component<any any> { super; thisstate = visible: false ; } { return <div> <button onClick= { this; } >show</button> <Viewer visible=thisstatevisible onClose= { this; } images=src: '' alt: '' name: '' /> </div> ; }
Props
props | type | default | description | required |
---|---|---|---|---|
visible | string | false | Viewer visible | true |
afterChange | string | noop | Specify a function that will be called when active index changes | false |
onClose | string | - | Specify a function that will be called when Visible close | true |
images | {src: string, alt: string}[] | [] | image source array | true |
activeIndex | number | 0 | active image index | false |
zIndex | number | 1000 | Viewer css z-index | false |
container | HTMLElement | null | set parent node(inline mode) | false |
drag | boolean | true | whether to drag image | false |
attribute | boolean | true | whether to show image attribute | false |
zoomable | boolean | true | whether to show 'zoom' buttom | false |
rotatable | boolean | true | whether to show 'rotate' button | false |
scalable | boolean | true | whether to show 'scale' button | false |
downloadable | boolean | true | whether to show 'download' button | false |
Keyboard support
Esc
: Close viewer.←
: View the previous image.→
: View the next image.↑
: Zoom in the image.↓
: Zoom out the image.Ctrl + 1
: Reset the image.Ctrl + ←
: Rotate left the image.Ctrl + →
: Rotate right the image.
License
MIT