Image Preview Modal

Image preview and editing modal for displaying images in a focused view. Perfect for image galleries, previews, and media viewing.

Features

Large image preview with responsive sizing
Optional title and description
Accessible alt text support
Object-contain for proper image scaling
Clean close button
Large modal size for better viewing

Examples

Basic Image Preview

With Title and Description

Usage

import { ImagePreviewModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  const imageUrl = 'https://example.com/image.jpg'
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Preview Image
      </Button>
      
      <ImagePreviewModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        imageUrl={imageUrl}
        title="Image Preview"
        description="View the full-size image"
        alt="Preview image"
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
imageUrl	string	-	URL of the image to preview
title	string	-	Optional modal title
description	string	-	Optional modal description
alt	string	'Preview'	Alt text for the image