Turn Google Drive into your
React Media CDN.
The complete React library for loading, streaming, caching, and resolving Google Drive and YouTube media instantly.
| 1 | import { |
| 2 | DriveMedia, |
| 3 | DriveImage, |
| 4 | DriveVideo |
| 5 | } from "@driveloader/react"; |
| 6 | |
| 7 | export function App() { |
| 8 | return ( |
| 9 | <> |
| 10 | <DriveImage src="https://drive.google.com/file/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs/view" /> |
| 11 | |
| 12 | <DriveVideo |
| 13 | src="https://drive.google.com/file/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs/view?type=video" |
| 14 | controls |
| 15 | preload="metadata" |
| 16 | /> |
| 17 | |
| 18 | <DriveMedia src="https://youtu.be/dQw4w9WgXcQ" /> |
| 19 | </> |
| 20 | ); |
| 21 | } |
Why Standard Drive Links Fail
Understand the CORS and HTML wrapper restrictions of Google Drive URLs, and see how DriveLoader fixes them seamlessly.
Standard <img /> or <video /> Tag
drive.google.com/file/d/.../view
text/html inside media tags.GET https://drive.google.com/file/d/ID/view -> 200 OK (text/html) [CORB Blocked]DriveLoader (<DriveImage /> & <DriveVideo />)
lh3.googleusercontent.com/d/...
image/* & video/*).GET https://lh3.googleusercontent.com/d/ID -> 200 OK (image/jpeg) [CDN Streamed]Resolution Pipeline Architecture
Click through the 6-stage resolution pipeline engine powering DriveLoader's instant CDN delivery.
1. Google Drive Link
Raw URL or File ID
Accepts any link format: drive.google.com/file/d/{ID}/view, open?id={ID}, uc?id={ID}, docs.google.com, lh3.googleusercontent.com, or raw 28+ char File IDs.
const input = "https://drive.google.com/file/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs/view";
Built for Production React Apps
Everything you need to deliver high-performance Google Drive media CDN features out of the box.
Smart URL Resolution
Parses drive.google.com/file/d/, open?id=, uc?id=, docs, lh3, and raw 28+ char file IDs instantly.
Google Drive Video Support
Stream videos with poster thumbnails, HTML5 controls, and metadata extraction (duration, width, height).
YouTube First-Class Embeds
Native support for YouTube URLs via <YouTubeVideo /> and <DriveMedia /> with lazy thumbnails and privacy-mode.
Public Folder Loading
Load all media assets from public Google Drive folders using API v3 with pagination and extension filters.
Mixed Media Galleries
<DriveGallery /> automatically inspects assets and renders images and videos side-by-side seamlessly.
Endpoint Learning
Remembers working CDN endpoints per file ID and prioritizes them in future resolutions.
Request Coalescing
Deduplicates concurrent in-flight requests for identical file IDs to eliminate redundant network traffic.
In-Memory Caching
LRU capacity eviction and TTL expiration with real-time performance metrics (getCacheStats()).
Stateful Custom Hooks
React hooks (useDriveImage, useDriveVideo, useDriveFolder) for total programmatic state control.
100% TypeScript & Zero-Deps
Fully typed API contracts, actionable error hierarchy, ultra-lightweight and tree-shakeable.
Get Started in Seconds
Install via your favorite package manager and start loading Google Drive media immediately.