Turn Google Drive into your
React Media CDN.
The complete React library for loading, streaming, caching, and resolving Google Drive hosted images, videos, and public folders.
| 1 | import { |
| 2 | DriveImage, |
| 3 | DriveVideo |
| 4 | } from "@driveloader/react"; |
| 5 | |
| 6 | export function App() { |
| 7 | return ( |
| 8 | <> |
| 9 | <DriveImage src="https://drive.google.com/file/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs/view" /> |
| 10 | |
| 11 | <DriveVideo |
| 12 | src="https://drive.google.com/file/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs/view?type=video" |
| 13 | controls |
| 14 | preload="metadata" |
| 15 | /> |
| 16 | </> |
| 17 | ); |
| 18 | } |
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).
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.