UI kit reference

components/ZoomableImage

Components#

Renders an image that zooms toward the pointer, pans, and copies from its right-click menu. Fills its parent.

TypeScript

const ZoomableImage: ForwardRefExoticComponent<ZoomableImageProps & RefAttributes<ZoomableImageHandle>>

ZoomableImage props
Name	Type	Description
alt	`string`	The image's alt text.
className?	`string`	Extra classes on the viewport.
imgClassName?	`string`	Classes on the `<img>`: its fit size and look.
imgRef?	`(element: HTMLImageElement \| null) => void`	Receives the `<img>` element (the lightbox animates it).
imgTestId?	`string`	Test id on the `<img>`.
imgTitle?	`string`	The image's tooltip.
onBackdropClick?	`() => void`	A click on the viewport around the image (never the end of a drag).
onError?	`() => void`	The image failed to load.
onLoad?	`(event: SyntheticEvent<HTMLImageElement>) => void`	The image decoded.
onMenuOpenChange?	`(open: boolean) => void`	The right-click menu opened or closed: an owner with keys of its own leaves them to the menu meanwhile.
src	`string`	The image's address.
style?	`CSSProperties`	Inline styles on the viewport.

How far past its real size an image zooms.

TypeScript

const MAX_REAL_SCALE = 8

What the owner of a ZoomableImage drives it with.

TypeScript

interface ZoomableImageHandle

ZoomableImageHandle properties
Name	Type	Description
reset	`() => void`	Back to fit.
zoomed	`() => boolean`	Whether it is zoomed in now.
zoomIn	`() => void`	One step in, around the centre.
zoomOut	`() => void`	One step out, around the centre.

TypeScript

interface ZoomableImageProps

ZoomableImageProps properties
Name	Type	Description
alt	`string`	The image's alt text.
className?	`string`	Extra classes on the viewport.
imgClassName?	`string`	Classes on the `<img>`: its fit size and look.
imgRef?	`(element: HTMLImageElement \| null) => void`	Receives the `<img>` element (the lightbox animates it).
imgTestId?	`string`	Test id on the `<img>`.
imgTitle?	`string`	The image's tooltip.
onBackdropClick?	`() => void`	A click on the viewport around the image (never the end of a drag).
onError?	`() => void`	The image failed to load.
onLoad?	`(event: SyntheticEvent<HTMLImageElement>) => void`	The image decoded.
onMenuOpenChange?	`(open: boolean) => void`	The right-click menu opened or closed: an owner with keys of its own leaves them to the menu meanwhile.
src	`string`	The image's address.
style?	`CSSProperties`	Inline styles on the viewport.