Overview
ImagePicker provides a unified interface for selecting and positioning images. Supports file uploads, image library browsing, and Unsplash stock photo search with proper attribution.
Key Features
- Three source tabs: Upload, Library, Stock Photos
- Image cropping and position adjustment
- Unsplash integration with automatic attribution
- Configurable aspect ratios (card, banner, square)
Examples
Interactive Demo
Click the image button to open the picker. Upload an image, browse the library, or search stock photos.
Selected Image
No image selected
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | ImagePickerValue | - | Current image value with URL, position, and attribution |
onChange | (value: ImagePickerValue | undefined) => void | required | Callback when image is selected or cleared |
aspectRatio | 'card' | 'banner' | 'square' | card | Crop aspect ratio: card (4:3), banner (21:9), or square |
programId | string | - | Program ID for loading image library |
disabled | boolean | false | Disable image picker interactions |
Usage
import { ImagePicker, type ImagePickerValue } from '@/ui/components';
// Basic usage
const [image, setImage] = useState<ImagePickerValue | undefined>();
<ImagePicker
value={image}
onChange={setImage}
aspectRatio="card" // 'card' (4:3), 'banner' (21:9), or 'square'
/>
// For banner images
<ImagePicker
value={bannerImage}
onChange={setBannerImage}
aspectRatio="banner"
/>
// With program ID for image library
<ImagePicker
value={image}
onChange={setImage}
aspectRatio="card"
programId="program-123"
/>