React wrapper for viewerjs
npm install react-viewerjsjsx
import React from "react"
import { RViewer, RViewerTrigger } from '../react-viewerjs'
const OneImagePreview = () => {
let sourceUrl = "./imgs/1.jpg"
let options={
toolbar: {//Since there is only one picture, let's hide "prev" and "next"
prev: false,
next: false
}
}
return (
)
}
const MultiImagePreview = () => {
let sourceUrl = ["./imgs/1.jpg","./imgs/2.jpg","./imgs/3.jpg","./imgs/4.jpg","./imgs/5.jpg"]
return (
)
}
const BaseDemoComponent = () => {
return (
)
};
ReactDOM.render( , document.getElementById('root'));
``
https://xiabingwu.github.io/react-viewerjs/#/
- #### list
``jsx
import React from "react"
import { RViewer, RViewerTrigger } from '../react-viewerjs'
const ListDemoComponent = () => {
let sourceImageUrls = [
"./imgs/1.jpg",
"./imgs/2.jpg",
"./imgs/3.jpg",
"./imgs/4.jpg",
"./imgs/5.jpg"
]
let thumbImageUrls = sourceImageUrls//In reality, the thumbnail and the original may not be the same, which are set to be equal, just for the sake of a simple demonstration
return (
{thumbImageUrls.map((pic, index) => {
return (
-
image {index+1}
{/By default, the index value is 0,So it is necessary to set the index prop/}
)
})
}
)
};
ReactDOM.render( , document.getElementById('root'));
```