Skip to Content
DocumentationInstallation

Installation

Package Manager

Install Media Picker using your preferred package manager:

npm install @koo-labs/media-picker

Peer Dependencies

Media Picker requires the following peer dependencies:

package.json
{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

CSS Import

Import the required CSS styles in your application:

app.tsx
import '@koo-labs/media-picker/styles.css';

API Key Setup

You need a Pexels API key to use Media Picker. Get one for free at pexels.com/api .

Option 1: Environment Variable

Set the PEXELS_API_KEY environment variable:

.env.local
PEXELS_API_KEY=your_api_key_here

Option 2: Props Configuration

Pass the API key directly via props:

app.tsx
<MediaPicker apiKey="your_api_key_here" />

TypeScript Configuration

Media Picker is written in TypeScript and includes type definitions. No additional configuration is required.

tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "esModuleInterop": true
  }
}

Next Steps

Now that you have Media Picker installed, let’s learn how to use it:

Basic Usage