Viewerjs-Webcomponent

!Framework
!Framework

> Image viewer webcomponent based on viewerjs.
- It can be imported in Vue, React and HTML.
- All the options & methods of viewerjs are avaliable.

Table of contents

- Getting started
- Options & Methods & Keyboard support of Viewerjs
- License & Contributing & Versioning

Getting started

$3

``shell
npm install viewerjs-webcomponent
`

#### Component Props
- options (Optional)
- Type: Object
- Viewerjs options.
- images
- Type: Array
- Images Urls.

#### Change Style
> If you want to override the default styles of Viewerjs-WebComponent, you can use the ::part pseudo-element to target and style its internal elements.
`css

`

#### Example

- Vue
> Skip component parsing in vite.config.js
`js
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
// Treat all tag names with dashes as custom elements
isCustomElement: (tag) => tag.includes('-')
}
}
})],
})
`
> Import and use it in Vue.
`vue





`

- React
> Skip component parsing in vite.config.js
`jsx
// Skip component parsing
export default defineConfig({
plugins: [react({
template: {
compilerOptions: {
// Treat all tag names with dashes as custom elements
isCustomElement: (tag) => tag.includes('-')
}
}
})],
})
`
> Import and use it in React.
`jsx
import { useState, useEffect } from 'react'
import getViewer from "viewerjs-webcomponent"

function App() {
const [options, setOptions] = useState({ toolbar: true, title: false })
const [images, setImages] = useState([
"src/assets/tibet-1.jpg",
"src/assets/tibet-2.jpg",
"src/assets/tibet-3.jpg",
"src/assets/tibet-4.jpg",
"src/assets/tibet-8.jpg",
"src/assets/tibet-9.jpg",
"src/assets/tibet-7.jpg",
"src/assets/tibet-6.jpg",
"src/assets/tibet-5.jpg",
])
const [viewer, setViewer] = useState(null)

useEffect(() => {
setViewer(getViewer.viewer)
}, [getViewer])
viewer?.show()

return (
<>{}
)
}

export default App
`
- HTML
`html


options='{"toolbar": true, "title": false}'
images='["./assets/tibet-1.jpg", "./assets/tibet-2.jpg", "./assets/tibet-3.jpg", "./assets/tibet-4.jpg", "./assets/tibet-5.jpg", "./assets/tibet-6.jpg", "./assets/tibet-7.jpg", "./assets/tibet-8.jpg", "./assets/tibet-9.jpg"]'>



``

Options and Methods and Keyboard support of Viewerjs

Refer to viewjs.

License and Contributing and Versioning

- License: MIT
- Contributing: Contributor Code of Conduct.
- Versioning: Semantic Versioning guidelines.

⬆ Back To Top