Skip to main content

Zoom Image

Zoom Image is a media component for enlarging images in place, like inspecting a product photo or a screenshot. People click or tap the image to open an enlarged view and can browse related images in a group.

Import

import { ZoomImage } from '@vortexlabs/vortex';
import type { ZoomImageProps } from '@vortexlabs/vortex';

Other links

ZoomImage

ZoomImage props
PropTypeDefaultAttributes
src
string
No default value
alt
string
No default value
width
union
No default value
height
union
No default value
maxWidth
union
No default value
aspectRatio
number
No default value
borderRadius
union
No default value
objectFit
union
cover
bordered
boolean
No default value
disabled
boolean
No default value
zoomMargin
union
6
onZoomChange
callback
No default value
onLoad
callback
No default value
onError
callback
No default value
renderImageSlot
callback
No default value
imageAttributes
object
No default value
className
union
No default value
attributes
object
No default value
ref
ref
No default value

ZoomImage Ref

ZoomImage ref methods
PropTypeDefaultAttributes
open
function
No default value
close
function
No default value

ZoomImage.Group

ZoomImage.Group props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
zoomMargin
union
6
rippleZoom
boolean
true
onIndexChange
callback
No default value
ref
ref
No default value

ZoomImage.Group Ref

ZoomImage.Group ref methods
PropTypeDefaultAttributes
open
function
No default value
close
function
No default value

ZoomImage.Item

ZoomImage.Item props
PropTypeDefaultAttributes
src
string
No default value
alt
string
No default value
width
union
No default value
height
union
No default value
maxWidth
union
No default value
aspectRatio
number
No default value
borderRadius
union
No default value
objectFit
union
cover
bordered
boolean
No default value
disabled
boolean
No default value
onLoad
callback
No default value
onError
callback
No default value
renderImageSlot
callback
No default value
imageAttributes
object
No default value
className
union
No default value
attributes
object
No default value
ref
ref
No default value

ZoomImage.Item Ref

ZoomImage.Item ref methods
PropTypeDefaultAttributes
open
function
No default value
close
function
No default value