react-viewer-soda


🥤 viewerjs component for react. Automatically detect changes in internal images.

Usage

$3

type:

``typescript
export interface ImageProps extends ImgHTMLAttributes {
/* You can get the instance of the viewer by passing a ref to the viewer property in props. /
viewer?: ForwardedRef
/* options for viewer /
options?: ViewerOptions
}
`

Using it is just like a normal img element:

`typescript
import { FC } from "react"
import { Image } from "react-viewer-soda"
import Viewer from "viewerjs"

const App: FC = () => {
const viewer = useRef(null)

return (






export default App
`

$3

type:

`typescript
export interface ImageGroupProps extends HTMLAttributes {
/* You can get the instance of the viewer by passing a ref to the viewer property in props. /
viewer?: ForwardedRef
/** You can specify the mode for filtering images.
* When the mode is 'exclude', img elements with 'data-no-rvs' will not be previewed.
* When the mode is 'include', only img elements with 'data-rvs' will be previewed.
The default value is 'exclude'. /
filterMode?: "exclude" | "include"
/* options for viewer /
options?: ViewerOptions
/** Whether to automatically detect changes in the internal images.
The default value is true. /
autoUpdate?: boolean
}
`

Using it is just like a normal div element:

`typescript
import { FC, useRef } from "react"
import { ImageGroup } from "react-viewer-soda"
import Viewer from "viewerjs"

const App: FC = () => {
const viewer = useRef(null)

return (



{/ The image below will not be previewed /}


)
}

export default App
`

$3

1. You can provide the data-rvs-url on the img element to change the image for the preview:

`typescript

`

2. ImageGroup has an autoUpdate property with a default value of true. When enabled, it detects changes in the internal images and automatically calls viewer.update. If your img elements are not going to change, you can set it to false. Only these changes will be detected:

1. The addition or deletion of img elements.
2. The data-rvs and data-no-rvs attributes of img elements.

If your img elements will only change attributes other than data-rvs and data-no-rvs, such as src or data-rvs-url, there is no need to enable autoUpdate`.