<DriveDocument /> Component
Preview Google Drive hosted PDFs, Google Docs, text files, and Markdown.
Overview
DriveDocument renders documents with zoom controls (+ / - / Reset), download link, and full height embedding using secure iframes.
Code Example
drive-document.tsx
| 1 | import { DriveDocument } from '@driveloader/react'; |
| 2 | |
| 3 | <DriveDocument |
| 4 | src="https://drive.google.com/file/d/DOC_ID/view" |
| 5 | width="100%" |
| 6 | height="600px" |
| 7 | showToolbar={true} |
| 8 | /> |
Best Practices
- •Wrap <DriveDocument /> in a fixed-height container or pass an explicit height to prevent iframe collapse.
Common Mistakes
- ×Relying on auto-height, which iframes do not natively support securely.