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 shown when the field is empty
value	ImageSourcePropType	—	Currently selected image source
title	string	—	Field label displayed above the input
required	boolean	false	Mark the field as required. Displays a visual indicator
placeholderIcon	IconName	—	Fallback icon shown when no media is selected
aspectRatio	'1:1' | '16:9' | '9:16'	'1:1'	Aspect ratio of the media preview
extra	ReactElement	—	Extra element rendered at the trailing end of the label row (e.g. a "Forgot password?" link)
errorText	string	—	Error message displayed below the input
clearText	string	—	Label for the clear action button
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin
isLoading	boolean	false	Show a loading state while the media is uploading or processing
onPress	() => void	—	Press handler that opens the media picker
onClear	() => void	—	Callback invoked when the user removes the selected media

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}
/>