MultinaireMediaPickerButton

Image/media picker button with preview and aspect ratio support.

Basic Usage

import { MultinaireMediaPickerButton } from '@multinaire/multinaire-design';

<MultinaireMediaPickerButton
  placeholder="Select image"
  value={imageSource}
  onPress={() => pickImage()}
/>

Props

Prop	Type	Default	Description
placeholder	string	-	Placeholder text
value	ImageSourcePropType	-	Selected image source
title	string	-	Label above the picker
required	boolean	false	Show required indicator
placeholderIcon	MultinaireIcons	-	Icon when no image selected
aspectRatio	'1:1' | '16:9' | '9:16'	'1:1'	Image aspect ratio
extra	ReactElement	-	Extra content beside title
errorText	string	-	Error message to display
clearText	string	-	Clear button text
flex	number	-	Flex value
margin	SpacingProps	-	Margin spacing
isLoading	boolean	false	Show loading state
onPress	() => void	-	Press handler to pick media
onClear	() => void	-	Clear handler

Examples

Profile Photo Picker

<MultinaireMediaPickerButton
  title="Profile Photo"
  placeholder="Add photo"
  placeholderIcon="Camera"
  value={profileImage}
  aspectRatio="1:1"
  onPress={pickProfilePhoto}
  onClear={() => setProfileImage(null)}
  clearText="Remove"
/>

Cover Image Picker

<MultinaireMediaPickerButton
  title="Cover Image"
  placeholder="Add cover image"
  value={coverImage}
  aspectRatio="16:9"
  onPress={pickCoverImage}
/>

Story Image Picker

<MultinaireMediaPickerButton
  placeholder="Add story"
  value={storyImage}
  aspectRatio="9:16"
  onPress={pickStoryImage}
/>

With Loading State

<MultinaireMediaPickerButton
  title="Upload Image"
  placeholder="Select image"
  value={image}
  isLoading={isUploading}
  onPress={pickAndUploadImage}
/>

With Validation

<MultinaireMediaPickerButton
  title="ID Document"
  required
  placeholder="Upload ID"
  value={idDocument}
  errorText={!idDocument ? 'ID document is required' : undefined}
  onPress={pickIdDocument}
/>