…and instead of your image, you're greeted with a broken link.
Google Drive is excellent for storing files, but it isn't designed to work as a media CDN. Developers often find themselves:
Manually converting share links
Testing different Google Drive endpoints
Debugging broken images or videos
Copying the same helper functions between projects
It quickly becomes repetitive and frustrating.
I ran into this issue across multiple projects, and after solving it several times, I decided it was time to build a proper solution.
---
Meet DriveLoader
GOOGLE_ADS_PLACEHOLDER
[ ADVERTISEMENT SPACE • SLOT_ID: article-detail-ad ]
Format: auto • Publisher: ca-pub-8663425706426895
**DriveLoader** is an open-source React library that makes Google Drive work like a media CDN.
Instead of worrying about URL formats, endpoint conversions, retries, or caching, you simply provide your Google Drive link and DriveLoader handles everything for you.
tsx
import { DriveImage } from "@driveloader/react";
<DriveImage
src={driveUrl}
alt="Profile"
/>
That's it.
No manual URL conversion.
No hacks.
No broken Google Drive media links.
---
What DriveLoader Can Do
DriveLoader has grown far beyond a simple image helper.
Today it supports:
🖼️ Google Drive Images
Render public Google Drive images with a single React component.
🎥 Google Drive Videos
Play videos hosted on Google Drive using a familiar React API.
📁 Public Folder Loading
Load all supported media from a public Google Drive folder with minimal setup.
⚡ Smart URL Resolution
Automatically finds the best working endpoint for your media.
💾 Built-in Caching
Resolved URLs are cached to improve performance and reduce unnecessary requests.
🔄 Automatic Retry & Fallback
If one endpoint fails, DriveLoader intelligently retries alternative endpoints.
⚛️ React Components & Hooks
Includes components and hooks that feel natural in modern React applications.
🔷 TypeScript First
Fully typed from the ground up with an emphasis on developer experience.
---
Why I Built It
One of the biggest lessons I've learned is this:
If you're copying the same code between projects, it's probably time to build a library.
DriveLoader started as a small utility function.
Then it became a URL parser.
Then a resolver.
Then caching.
Then retries.
Eventually, it evolved into a complete toolkit for working with Google Drive media in React.
Building it taught me a lot about:
Open-source development
API design
TypeScript library architecture
React package development
Developer experience
Documentation
Testing and release workflows
---
Getting Started
Installation is simple:
bash
npm install @driveloader/react
Example:
tsx
import { DriveImage } from "@driveloader/react";
export default function App() {
return (
<DriveImage
src={driveUrl}
alt="Example"
/>
);
}
I'm actively working on making DriveLoader even more powerful with:
Better documentation
Interactive playgrounds
Improved diagnostics
Performance optimisations
Enhanced media handling
Better Next.js support
My goal is to make DriveLoader the easiest way to use Google Drive as a media source in React applications.
---
Thank You ❤️
Launching an open-source project is always exciting, but it's also a little nerve-racking.
Seeing people install your package, open issues, suggest improvements, and share feedback is incredibly rewarding.
If you've supported DriveLoader in any way—whether by starring the repository, installing the package, reporting an issue, or upvoting on Product Hunt—thank you.
I'm excited to keep improving DriveLoader and building more tools that make developers' lives a little easier.
