Basic Usage

Learn how to integrate Media Picker into your React application.

Simple Example

The most basic usage of Media Picker:

App.tsx


import { MediaPicker } from '@koo-labs/media-picker';
import '@koo-labs/media-picker/styles.css';
 
function App() {
  const handleSelect = (media) => {
    console.log('Selected media:', media);
  };
 
  return (
    <MediaPicker onSelect={handleSelect} />
  );
}

With Button Trigger

Use MediaPickerButton for a button-triggered picker:

App.tsx


import { MediaPickerButton } from '@koo-labs/media-picker';
 
function App() {
  return (
    <MediaPickerButton
      onSelect={(media) => console.log(media)}
    >
      Choose Media
    </MediaPickerButton>
  );
}

Controlled Mode

For full control over the picker state:

ControlledPicker.tsx


import { useState } from 'react';
import { MediaPicker } from '@koo-labs/media-picker';
 
function App() {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState([]);
 
  return (
    <>
      <button onClick={() => setOpen(true)}>
        Open Picker
      </button>
 
      <MediaPicker
        open={open}
        onOpenChange={setOpen}
        selected={selected}
        onSelect={setSelected}
      />
    </>
  );
}

Multi-Select Mode

Enable selection of multiple items:

MultiSelect.tsx


<MediaPicker
  multiple
  maxSelection={5}
  onSelect={(media) => console.log(media)}
/>

Filtering by Type

Show only photos or videos:

FilteredPicker.tsx


{/* Photos only */}
<MediaPicker mediaType="photo" />
 
{/* Videos only */}
<MediaPicker mediaType="video" />

Next Steps

API Reference - Explore all available props
Examples - See more examples