props |
type |
default |
description |
required |
customImgNode |
(prop: ViewerCanvasProps) => React.ReactNode |
- |
customer imgNode support custom image containers |
false |
eventOnImg |
boolean |
false |
When true, you can only drag and zoom on the image. |
false |
rotate |
number |
undefined |
0 ~ 360° |
false |
onImgUpdate |
(prop: ViewerCoreState) => void; |
- |
Image scaling, dragging and other attribute change callback events (high performance consumption, use with caution) |
false |
fetchImage |
(successCb: SuccessCallback, src: string) => void |
null |
called when the component wants to receive an image from images prop |
false |
eg:
npm i @kalukali/react-viewer
const customImgNode = status => (
<div style={{ position: 'relative' }}>
<img src={status.imgSrc} style={{ width: '100%', height: '100%' }} alt="" />
</div>
)
export const FetchImage = ({ images, selectedPhotoData, onSelectPhoto, setSelectedPhotoData, token }) => {
return (
<Viewer
noNavbar
fetchImage={(successCb, src) => {
(async () => {
await privateAxios(token).get(src, {
responseType: 'blob',
}).then((response) => {
// successCb(URL.createObjectURL(response.data));
const reader = new window.FileReader();
reader.readAsDataURL(response.data);
reader.onload = function () {
successCb(reader.result);
}
})
})()
}}
activeIndex={selectedPhotoData ? selectedPhotoData.index : 0}
visible={!!selectedPhotoData}
onClose={onSelectPhoto}
images={images.map(i => ({ src: webResourcesPath + '/images' + i.path }))}
/>
)
}
react image viewer.
Because I can`t be comfortable using viewerjs in react, so I created react-viewer to replace it.
react >= 16.8.0 | react-dom >= 16.8.0
npm install react-viewer --save
import * as React from 'react';
import Viewer from 'react-viewer';
function App() {
const [ visible, setVisible ] = React.useState(false);
return (
<div>
<button onClick={() => { setVisible(true); } }>show</button>
<Viewer
visible={visible}
onClose={() => { setVisible(false); } }
images={[{src: '', alt: ''}]}
/>
</div>
);
}
import React, { FC } from 'react'
import dynamic from 'next/dynamic'
const ReactViewer = dynamic(
() => import('react-viewer'),
{ ssr: false }
)
export const Viewer: FC = () => {
return (
<ReactViewer
visible={true}
onClose={() => {}}
images={[{src: ''}]}
/>
)
}
export default Viewer
I'm sorry, ssr is not currently supported in 3.x
, it will be fixed in 4.0
.
props |
type |
default |
description |
required |
visible |
string |
false |
Viewer visible |
true |
onClose |
function |
- |
Specify a function that will be called when Visible close |
true |
images |
ImageDecorator[] |
[] |
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' button |
false |
rotatable |
boolean |
true |
whether to show 'rotate' button |
false |
scalable |
boolean |
true |
whether to show 'scale' button |
false |
onMaskClick |
(e) => void |
- |
callback function when mask is clicked |
false |
downloadable |
boolean |
false |
whether to show 'download' |
false |
noClose |
boolean |
false |
to not render close button |
false |
noNavbar |
boolean |
false |
to not render the navbar |
false |
noToolbar |
boolean |
false |
to not render the toolbar |
false |
noImgDetails |
boolean |
false |
to not render image detail (WxH) |
false |
noFooter |
boolean |
false |
to not render the entire footer |
false |
changeable |
boolean |
true |
wheather to show change button |
false |
customToolbar |
(defaultToolbarConfigs: ToolbarConfig[]) => ToolbarConfig[] |
- |
customer toolbar |
false |
zoomSpeed |
number |
0.05 |
zoom speed |
false |
defaultSize |
ViewerImageSize |
- |
default image size |
false |
defaultImg |
viewerdefaultimg |
- |
if load img failed, show default img |
false |
disableKeyboardSupport |
boolean |
false |
disable keyboard support |
false |
noResetZoomAfterChange |
boolean |
false |
preserve zoom after image change |
false |
noLimitInitializationSize |
boolean |
false |
no limit image initialization size |
false |
defaultScale |
number |
1 |
set default scale |
false |
onChange |
(activeImage: ImageDecorator, index: number) => void |
- |
callback when image change |
false |
loop |
boolean |
true |
whether enable image loop |
false |
disableMouseZoom |
boolean |
false |
whether disable mouse zoom |
false |
downloadInNewWindow |
boolean |
false |
whether to download in a new window |
false |
className |
string |
- |
customized CSS class |
false |
showTotal |
boolean |
true |
whether to display the total number and range |
false |
maxScale |
number |
- |
maximum scaling |
false |
minScale |
number |
0.1 |
minimum scaling |
false |
props |
type |
default |
description |
required |
src |
string |
- |
image source |
true |
alt |
string |
- |
image description |
false |
downloadUrl |
string |
- |
image downlaod url |
false |
defaultSize |
ViewerImageSize |
- |
image size |
false |
props |
type |
default |
description |
required |
width |
number |
- |
image width |
true |
height |
number |
- |
image height |
true |
props |
type |
default |
description |
required |
src |
number |
- |
image source |
true |
width |
number |
- |
image width |
false |
height |
number |
- |
image height |
false |
props |
type |
default |
description |
required |
key |
string |
- |
tool key |
true |
render |
React.ReactNode |
- |
tool render |
false |
onClick |
function |
- |
callback function when action is clicked |
false |
props |
type |
default |
description |
required |
image |
string |
- |
image |
false |
-
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.
MIT