React Video Editor Documentation
Pexels Image Adapter
Integrate Pexels images with React Video Editor
Pexels Image Adapter
The Pexels image adapter integrates with the Pexels API to access their extensive photo library.
Overview
The Pexels adapter allows you to:
- Search and browse Pexels photos
- Download images for overlays and backgrounds
- Access image metadata
- Handle Pexels API authentication
Setup
First, you'll need a Pexels API key:
- Sign up at Pexels
- Get your API key from the dashboard
- Configure the adapter with your key
Usage
import { PexelsImageAdapter } from 'react-video-editor';
const adapter = new PexelsImageAdapter({
apiKey: 'your-pexels-api-key'
});
// Search for images
const images = await adapter.search('landscape', {
page: 1,
perPage: 20
});
// Load a specific image
const image = await adapter.load('pexels-image-id');Configuration
| Option | Type | Default | Description |
|---|---|---|---|
apiKey | string | Required | Your Pexels API key |
baseUrl | string | 'https://api.pexels.com' | Pexels API base URL |
timeout | number | 30000 | Request timeout in milliseconds |
API Methods
Search Images
const results = await adapter.search(query, options);Get Popular Images
const popular = await adapter.getPopular(options);Get Image by ID
const image = await adapter.getById(imageId);Get Curated Images
const curated = await adapter.getCurated(options);Search Options
| Option | Type | Description |
|---|---|---|
query | string | Search term |
page | number | Page number (default: 1) |
perPage | number | Results per page (max: 80) |
orientation | 'landscape' | 'portrait' | 'square' | Image orientation |
size | 'large' | 'medium' | 'small' | Image size |
Error Handling
The Pexels adapter handles:
- API rate limiting
- Authentication errors
- Network timeouts
- Invalid image IDs
Examples
// Search for landscape images
const landscapeImages = await adapter.search('mountain', {
page: 1,
perPage: 10,
orientation: 'landscape',
size: 'large'
});
// Get a specific image
const image = await adapter.getById('1234567');
console.log('Image URL:', image.src.original);