Examples & Recipes Gallery

Explore copy-pasteable code examples for images, videos, public folder galleries, custom hooks, and cache management.

image

Render Google Drive images with skeletons, fade-in transitions, and automatic fallback endpoints.

basic-image.tsx

1	import { DriveImage } from '@driveloader/react';
2
3	export function Avatar() {
4	return (
5	<DriveImage
6	src="https://drive.google.com/file/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs/view"
7	alt="User Avatar"
8	width={120}
9	height={120}
10	fade={true}
11	/>
12	);
13	}

video

Stream Google Drive video files with HTML5 controls, custom poster thumbnails, and metadata extraction.

video-player.tsx

1	import { DriveVideo } from '@driveloader/react';
2
3	export function HeroVideo() {
4	return (
5	<DriveVideo
6	src="https://drive.google.com/file/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs/view?type=video"
7	controls
8	autoPlay={false}
9	preload="metadata"
10	width={640}
11	height={360}
12	/>
13	);
14	}

gallery

Responsive grid layout that automatically renders images and videos side-by-side without manual configuration.

mixed-gallery.tsx

1	import { DriveGallery } from '@driveloader/react';
2
3	export function MediaShowcase() {
4	return (
5	<DriveGallery
6	images={[
7	'https://drive.google.com/file/d/IMAGE_ID/view',
8	'https://drive.google.com/file/d/VIDEO_ID/view?type=video',
9	]}
10	columns={{ sm: 1, md: 2, lg: 3 }}
11	gap="1.5rem"
12	/>
13	);
14	}

folder

Fetch all images and videos from a public Google Drive folder using Google Drive API v3 with pagination.

folder-loader.tsx

1	import { useDriveFolder, DriveImage } from '@driveloader/react';
2
3	export function FolderView({ folderUrl, apiKey }: { folderUrl: string; apiKey: string }) {
4	const { folder, assets, loading, error, loadMore, hasMore } = useDriveFolder({
5	folderUrl,
6	apiKey,
7	mediaTypes: ['image', 'video'],
8	pageSize: 20,
9	});
10
11	return (
12	<div>
13	<h3>{folder?.name}</h3>
14	<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }}>
15	{assets.map(asset => (
16	<DriveImage key={asset.id} src={asset.resolvedUrl} alt={asset.name} />
17	))}
18	</div>
19	{hasMore && <button onClick={loadMore}>Load More</button>}
20	</div>
21	);
22	}

hooks

Access video resolution state, duration, width, height, mimeType, and thumbnail URLs directly in React components.

use-drive-video.tsx

1	import { useDriveVideo } from '@driveloader/react';
2
3	export function VideoInfo({ driveUrl }: { driveUrl: string }) {
4	const { videoUrl, loading, error, metadata, thumbnailUrl } = useDriveVideo(driveUrl);
5
6	if (loading) return <div>Resolving video...</div>;
7	if (error) return <div>Failed to load: {error.message}</div>;
8
9	return (
10	<div>
11	<video src={videoUrl!} controls poster={thumbnailUrl \|\| undefined} />
12	<p>Duration: {metadata?.duration}s \| Dimensions: {metadata?.width}x{metadata?.height}</p>
13	</div>
14	);
15	}

cache

Inspect cache hits, misses, hit rate percentages, in-flight active requests, and memory usage estimates.

cache-metrics.tsx

1	import { getCacheStats, clearCache } from '@driveloader/react';
2
3	function LogStats() {
4	const stats = getCacheStats();
5	console.log(`Cache Hit Rate: ${stats.hitRate}%`);
6	console.log(`Cached Items: ${stats.cachedEntries}`);
7	console.log(`Memory Estimate: ${stats.memoryUsageEstimate}`);
8	}