Image Zoom
Image zoom is a component that allows you to zoom in on an image.
Powered by
Installation
npx kibo-ui@latest add image-zoom
Features
TBD.
Examples
Custom backdrop
Custom margin
Props
The image zoom view is made up of the following subcomponents:
ImageZoom
The ImageZoom component is used to provide the features to the image zoom.
| Prop | Type | Default |
|---|---|---|
backdropClassName? | string | - |
className? | string | - |
onZoomChange? | ((value: boolean) => void) | - |
isZoomed? | boolean | - |
zoomMargin? | number | - |
zoomImg? | ImgHTMLAttributes<HTMLImageElement> | - |
ZoomContent? | ((data: { img: ReactElement<unknown, string | JSXElementConstructor<any>> | null; buttonUnzoom: ReactElement<HTMLButtonElement, string | JSXElementConstructor<...>>; modalState: ModalState; onUnzoom: () => void; }) => ReactElement<...>) | - |
wrapElement? | "div" | "span" | - |
swipeToUnzoomThreshold? | number | - |
IconZoom? | ElementType<any, keyof IntrinsicElements> | - |
IconUnzoom? | ElementType<any, keyof IntrinsicElements> | - |
classDialog? | string | - |
children | ReactNode | - |
canSwipeToUnzoom? | boolean | - |
a11yNameButtonZoom? | string | - |
a11yNameButtonUnzoom? | string | - |