PhotoProvider

NameDescriptionTypeDefault Value
childrenReact.ReactNodeRequired*
onIndexChange(index: number, state: PhotoProviderState) => void
onVisibleChange(visible: boolean, index: number, state: PhotoProviderState) => void
loopWhether to cycle the preview, when the number is reached, it will be enabledboolean | number3
speedanimation speed(type: ActiveAnimationType) =>number() => 400
easinganimation function(type: ActiveAnimationType) =>string() => 'cubic-bezier(0.25, 0.8, 0.25, 1)'
photoClosableCan the image be clicked to closeboolean
maskClosableWhether the background click can be closedbooleantrue
maskOpacityDefault background transparencynumber | null1
pullClosableWhether the drop down can be closedbooleantrue
bannerVisibleNavigation bar visiblebooleantrue
overlayRenderCustom render overlays(overlayProps: OverlayRenderProps) => React.ReactNode
toolbarRenderCustomize the rendering toolbar(overlayProps: OverlayRenderProps) => React.ReactNode
classNamestring
maskClassNamestring
photoWrapClassNamestring
photoClassNamestring
loadingElementCustom loadingJSX.Element
brokenElementCustom loading failed renderingJSX.Element | ((photoProps: BrokenElementParams) => JSX.Element)
portalContainerCustom portal target (e.g. for usage in web components)HTMLElementdocument.body

PhotoView

NameDescriptionTypeDefault Value
srcImage srcstring
renderCustom rendering, lower priority than src(props: PhotoRenderParams) => React.ReactNode
overlayOverlayReact.ReactNode
widthCustom render node widthnumber
heightCustom render node heightnumber
childrenChild nodes, usually thumbnailsReact.ReactElement

DataType

NameDescriptionTypeDefault Value
keyUniquely identifiesnumber | stringRequired*
srcRESOURCE ADDRESSstring
renderCustom rendering, lower priority than src(props: PhotoRenderParams) => React.ReactNode
overlayOverlayReact.ReactNode
widthCustom render node widthnumber
heightCustom render node heightnumber
originRefTRIGGER REFReact.MutableRefObject<HTMLElement | null>

OverlayRenderProps

NameDescriptionTypeDefault Value
imagesPicture listDataType[]Required*
indexCURRENT INDEXnumberRequired*
onIndexChangeIndex change callbak(index: number) => voidRequired*
visibleIs it visiblebooleanRequired*
onCloseclose event callback(evt?: React.MouseEvent | React.TouchEvent) => voidRequired*
overlayVisibleIs the covering visiblebooleanRequired*
overlayOverlayReact.ReactNodeRequired*
rotateCurrent rotation anglenumberRequired*
onRotateRotation event callback(rotate: number) => voidRequired*
scaleCurrent zoomnumberRequired*
onScaleZoom event callback(scale: number) => voidRequired*