# image-viewer

- 分组：高级 / 可选能力（Advanced / Optional）
- 页面：/components/image-viewer
- 源码：packages/react/src/components/image-viewer.tsx

## 导出

```ts
import { ImageViewer } from "@modra/react";
```

## Props（ImageViewerProps）

| 名称 | 必填 | 类型 | 说明 |
| --- | --- | --- | --- |
| `items` | 是 | `readonly ImageViewerItem[]` | Images to browse. An empty list renders nothing. |
| `open` | 否 | `boolean` |  |
| `defaultOpen` | 否 | `boolean` |  |
| `onOpenChange` | 否 | `(open: boolean) => void` |  |
| `index` | 否 | `number` | Index of the displayed image (controlled). |
| `defaultIndex` | 否 | `number` |  |
| `onIndexChange` | 否 | `(index: number) => void` |  |
| `loop` | 否 | `boolean` | Wrap around at the first/last image. |
| `minScale` | 否 | `number` |  |
| `maxScale` | 否 | `number` |  |
| `actions` | 否 | `React.ReactNode \| ((context: ImageViewerActionsContext) => React.ReactNode)` | Extra toolbar content, e.g. a download button. Receives the current item. |
| `className` | 否 | `string` |  |