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
Prop	Type	Default	Attributes
`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
Prop	Type	Default	Attributes
`open`	`function`	No default value
`close`	`function`	No default value

ZoomImage.Group

ZoomImage.Group props
Prop	Type	Default	Attributes
`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
Prop	Type	Default	Attributes
`open`	`function`	No default value
`close`	`function`	No default value

ZoomImage.Item

ZoomImage.Item props
Prop	Type	Default	Attributes
`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
Prop	Type	Default	Attributes
`open`	`function`	No default value
`close`	`function`	No default value