# components/ZoomableImage (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/ZoomableImage.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/ZoomableImage.tsx).

## Components

### `ZoomableImage`

Component.

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

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

**Props**

- `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.

Source: [ui/src/components/ZoomableImage.tsx:104](https://github.com/Tahul/zidane/blob/main/ui/src/components/ZoomableImage.tsx#L104)

## Constants

### `MAX_REAL_SCALE`

Constant.

How far past its real size an image zooms.

```ts
const MAX_REAL_SCALE = 8
```

Source: [ui/src/components/zoom.ts:14](https://github.com/Tahul/zidane/blob/main/ui/src/components/zoom.ts#L14)

## Interfaces

### `ZoomableImageHandle`

Interface.

What the owner of a [`ZoomableImage`](https://zidane.si/docs/reference/ui-components-zoomable-image.md#ZoomableImage) drives it with.

```ts
interface ZoomableImageHandle
```

**Properties**

- `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.

Source: [ui/src/components/ZoomableImage.tsx:49](https://github.com/Tahul/zidane/blob/main/ui/src/components/ZoomableImage.tsx#L49)

### `ZoomableImageProps`

Interface.

Props for [`ZoomableImage`](https://zidane.si/docs/reference/ui-components-zoomable-image.md#ZoomableImage).

```ts
interface ZoomableImageProps
```

**Properties**

- `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.

Source: [ui/src/components/ZoomableImage.tsx:61](https://github.com/Tahul/zidane/blob/main/ui/src/components/ZoomableImage.tsx#L61)