React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

ImagePreview

Optimized image preview component with automatic format conversion and lazy loading

Interactive Playground

Customize the image properties and see the changes in real-time

Image URL

Sample Images

Loading State

✅ Loaded

Examples

Different image optimization scenarios

Default (WebP, 100% quality)

Fixed Width (400px)

Lower Quality (50%)

Placeholder (No Image)

Features

✓ Automatic image optimization
✓ Format conversion (WebP, JPEG, PNG)
✓ Quality adjustment
✓ Responsive sizing (width/height)
✓ Lazy loading support
✓ Loading state callbacks
✓ Retry mechanism for failed loads
✓ Fallback to original image
✓ Processing detection for assets domain
✓ Automatic placeholder on error

API Reference

Props

source

string - Image URL to display (required)

alt

string - Alt text for accessibility (default: '')

className

string - CSS classes to apply

style

React.CSSProperties - Inline styles

format

string - Output format: 'webp', 'jpeg', 'png' (default: 'webp')

quality

number - Image quality 1-100 (default: 100)

width

number - Target width in pixels, -1 for auto (default: -1)

height

number - Target height in pixels, -1 for auto (default: -1)

retry

number - Number of retry attempts, -1 for no retry (default: -1)

onLoad

() => void - Callback when image loads successfully

onIsLoading

(isLoading: boolean) => void - Callback when loading state changes

Usage Notes

Image Optimization: The component automatically optimizes images from the configured assets domain using the specified format, quality, and dimensions.

Loading States: Use the onIsLoading callback to track loading state and show custom loading indicators.

Retry Logic: Set the retry prop to enable automatic retry for images that are still processing.

Fallback: If optimization fails, the component automatically falls back to the original image source.