API – react-photo-view

PhotoProvider

Name	Description	Type	Default Value
children		React.ReactNode	Required*
onIndexChange		(index: number, state: PhotoProviderState) => void
onVisibleChange		(visible: boolean, index: number, state: PhotoProviderState) => void
loop	Whether to cycle the preview, when the number is reached, it will be enabled	boolean \| number	3
speed	animation speed	(type: ActiveAnimationType) =>number	() => 400
easing	animation function	(type: ActiveAnimationType) =>string	() => 'cubic-bezier(0.25, 0.8, 0.25, 1)'
photoClosable	Can the image be clicked to close	boolean
maskClosable	Whether the background click can be closed	boolean	true
maskOpacity	Default background transparency	number \| null	1
pullClosable	Whether the drop down can be closed	boolean	true
bannerVisible	Navigation bar visible	boolean	true
overlayRender	Custom render overlays	(overlayProps: OverlayRenderProps) => React.ReactNode
toolbarRender	Customize the rendering toolbar	(overlayProps: OverlayRenderProps) => React.ReactNode
className		string
maskClassName		string
photoWrapClassName		string
photoClassName		string
loadingElement	Custom loading	JSX.Element
brokenElement	Custom loading failed rendering	JSX.Element \| ((photoProps: BrokenElementParams) => JSX.Element)
portalContainer	Custom portal target (e.g. for usage in web components)	HTMLElement	document.body

Name	Description	Type	Default Value
src	Image src	string
render	Custom rendering, lower priority than src	(props: PhotoRenderParams) => React.ReactNode
overlay	Overlay	React.ReactNode
width	Custom render node width	number
height	Custom render node height	number
children	Child nodes, usually thumbnails	React.ReactElement
triggers	The trigger mode which executes opening image action	Array<"onClick" \| "onDoubleClick">	["onClick"]

Name	Description	Type	Default Value
key	Uniquely identifies	number \| string	Required*
src	RESOURCE ADDRESS	string
render	Custom rendering, lower priority than src	(props: PhotoRenderParams) => React.ReactNode
overlay	Overlay	React.ReactNode
width	Custom render node width	number
height	Custom render node height	number
originRef	TRIGGER REF	React.MutableRefObject<HTMLElement \| null>

Name	Description	Type	Default Value
images	Picture list	DataType[]	Required*
index	CURRENT INDEX	number	Required*
onIndexChange	Index change callbak	(index: number) => void	Required*
visible	Is it visible	boolean	Required*
onClose	close event callback	(evt?: React.MouseEvent \| React.TouchEvent) => void	Required*
overlayVisible	Is the covering visible	boolean	Required*
overlay	Overlay	React.ReactNode	Required*
rotate	Current rotation angle	number	Required*
onRotate	Rotation event callback	(rotate: number) => void	Required*
scale	Current zoom	number	Required*
onScale	Zoom event callback	(scale: number) => void	Required*