Skip to main content

Zoom Image

Zoom Image is a media element that enlarges an image in place, such as inspecting a product photo or a screenshot.

Import

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

Allied components

Other links

ZoomImage

ZoomImage props
PropTypeDefaultAttributes
src
string
No default value
alt
string
No default value
closeAriaLabel
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
callback
No default value
close
callback
No default value

ZoomImage.Group

ZoomImage.Group props
PropTypeDefaultAttributes
closeAriaLabel
string
No default value
previousAriaLabel
string
No default value
nextAriaLabel
string
No default value
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
callback
No default value
close
callback
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
callback
No default value
close
callback
No default value