Examples & Recipes Gallery
Explore copy-pasteable code examples for images, videos, public folder galleries, custom hooks, and cache management.
Universal <DriveMedia /> Auto-Detector
One single component automatically detects whether the Google Drive link is an image, video, audio track, or PDF document.
| 1 | import { DriveMedia } from '@driveloader/react'; |
| 2 | |
| 3 | export function UniversalAsset({ driveUrl }: { driveUrl: string }) { |
| 4 | return ( |
| 5 | <DriveMedia |
| 6 | src={driveUrl} |
| 7 | alt="Dynamic Media Asset" |
| 8 | controls |
| 9 | /> |
| 10 | ); |
| 11 | } |
Google Drive Audio & Playlist Player
Stream Google Drive hosted audio files with custom waveform visualization canvas and multi-track playlists.
| 1 | import { DriveAudio, DrivePlaylist } from '@driveloader/react'; |
| 2 | |
| 3 | export function PodcastPlayer() { |
| 4 | return ( |
| 5 | <DrivePlaylist |
| 6 | tracks={[ |
| 7 | { src: 'https://drive.google.com/file/d/AUDIO_1/view', title: 'Episode 1: Intro', artist: 'DriveLoader' }, |
| 8 | { src: 'https://drive.google.com/file/d/AUDIO_2/view', title: 'Episode 2: Deep Dive', artist: 'DriveLoader' } |
| 9 | ]} |
| 10 | /> |
| 11 | ); |
| 12 | } |
PDF & Document Viewer (<DriveDocument />)
Preview PDFs, Google Docs, text files, and Markdown directly inside React apps with zoom and download controls.
| 1 | import { DriveDocument } from '@driveloader/react'; |
| 2 | |
| 3 | export function DocumentReader({ docUrl }: { docUrl: string }) { |
| 4 | return ( |
| 5 | <DriveDocument |
| 6 | src={docUrl} |
| 7 | height="600px" |
| 8 | width="100%" |
| 9 | /> |
| 10 | ); |
| 11 | } |
Portfolio & Photography Website
High-performance masonry photo gallery with skeleton placeholders, lazy loading, and failover endpoints.
| 1 | import { DriveGallery } from '@driveloader/react'; |
| 2 | |
| 3 | export function PhotographyPortfolio({ photoUrls }: { photoUrls: string[] }) { |
| 4 | return ( |
| 5 | <DriveGallery |
| 6 | images={photoUrls} |
| 7 | columns={{ sm: 1, md: 2, lg: 3 }} |
| 8 | gap="1.5rem" |
| 9 | /> |
| 10 | ); |
| 11 | } |
Next.js App Router Loader (createDriveNextLoader)
Pass a custom loader to Next.js <Image /> component for optimized server-side rendering and CDN delivery.
| 1 | import Image from 'next/image'; |
| 2 | import { createDriveNextLoader } from '@driveloader/react'; |
| 3 | |
| 4 | const driveLoader = createDriveNextLoader(); |
| 5 | |
| 6 | export function ProfileAvatar({ src }: { src: string }) { |
| 7 | return ( |
| 8 | <Image |
| 9 | loader={driveLoader} |
| 10 | src={src} |
| 11 | alt="User Profile" |
| 12 | width={300} |
| 13 | height={300} |
| 14 | priority |
| 15 | /> |
| 16 | ); |
| 17 | } |
Vite & React Router Single Page App
Seamless single page application integration with instant client-side resolution and LRU memory caching.
| 1 | import { DriveImage, DriveVideo } from '@driveloader/react'; |
| 2 | |
| 3 | export function ViteApp() { |
| 4 | return ( |
| 5 | <main className="p-8"> |
| 6 | <DriveImage src="https://drive.google.com/file/d/IMG_ID/view" alt="Vite Demo" /> |
| 7 | <DriveVideo src="https://drive.google.com/file/d/VID_ID/view" controls /> |
| 8 | </main> |
| 9 | ); |
| 10 | } |
Course Platform & Video Player
Video course streaming platform featuring automatic poster thumbnails and video metadata extraction.
| 1 | import { DriveVideo, useDriveVideo } from '@driveloader/react'; |
| 2 | |
| 3 | export function LessonPlayer({ lessonUrl }: { lessonUrl: string }) { |
| 4 | const { metadata, loading } = useDriveVideo(lessonUrl); |
| 5 | |
| 6 | return ( |
| 7 | <div> |
| 8 | <DriveVideo src={lessonUrl} controls autoPlay={false} /> |
| 9 | {!loading && <p>Lesson Length: {metadata?.duration} seconds</p>} |
| 10 | </div> |
| 11 | ); |
| 12 | } |
Basic Image Component
Render Google Drive images with skeletons, fade-in transitions, and automatic fallback endpoints.
| 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 | } |
Public Folder Explorer
Fetch all images and videos from a public Google Drive folder using Google Drive API v3 with pagination.
| 1 | import { useDriveFolder, DriveImage } from '@driveloader/react'; |
| 2 | |
| 3 | export function FolderView({ folderUrl, apiKey }: { folderUrl: string; apiKey: string }) { |
| 4 | const { folder, assets, loading, loadMore, hasMore } = useDriveFolder({ |
| 5 | folderUrl, |
| 6 | apiKey, |
| 7 | mediaTypes: ['image', 'video', 'audio', 'document'], |
| 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 | } |
Developer Debugger HUD (<DriveDebugOverlay />)
Expose real-time telemetry, cache hits, resolution latency, and candidate endpoints during development.
| 1 | import { DriveDebugOverlay } from '@driveloader/react'; |
| 2 | |
| 3 | export function App() { |
| 4 | return ( |
| 5 | <main> |
| 6 | <YourAppContent /> |
| 7 | {process.env.NODE_ENV === 'development' && <DriveDebugOverlay />} |
| 8 | </main> |
| 9 | ); |
| 10 | } |