ImagePreview

A single-image preview in Flood Dialog with loading and failure feedback.

Preview

Image

ShowCaption

ShowDownload

Disabled

Use ImagePreview

ImagePreview is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood

PackageProject UI

"use client";

import { FloodRoot, ImagePreview, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ImagePreview title="Flood mark" src="/flood-mark.png" alt="Pink Flood mark"
        trigger={props => <Button {...props} variant="subtle">Preview image</Button>} />
    </FloodRoot>
  );
}

Design notes

Loads the image only while its dialog content is mounted.
The host owns trusted URLs, object URL lifetime and download permissions.

API reference

Prop	Values	Default
`title`	string	Required
`trigger`	(props: OverlayTriggerProps) => ReactNode	Required
`open`	boolean	—
`defaultOpen`	boolean	—
`onOpenChange`	(open: boolean) => void	—
`disabled`	boolean	—
`closeLabel`	string	—
`closeOnOutsideClick`	boolean	—
`initialFocusRef`	RefObject<HTMLElement \| null>	—
`src`	string	Required
`alt`	string	Required
`caption`	ReactNode	—
`downloadHref`	string	—
`downloadLabel`	string	—
`loadingLabel`	string	—
`errorLabel`	string	—
`Native HTML props`	Omit<Omit<HTMLAttributes<HTMLDialogElement>, "children" \| "title" \| "role">, "children" \| "description">	Forwarded

View TypeScript source

Page Markdown Agent skill