📦 React File Preview Library

A modern, feature-rich React library for previewing various file types including PDF, Excel, Word, PowerPoint, images, videos, and code files.

✨ Features

• 🎨 Modern UI with glassmorphism effects and smooth animations
• 📄 Multiple File Formats: PDF, XLSX, DOCX, PPTX, images, videos, code files
• 🔄 Smart Fallback System: OneDrive Viewer → Client-side → Google Docs
• 💫 Responsive Design: Works seamlessly on desktop and mobile
• 🌙 Light Theme: Clean, professional appearance
• ⚡ Zero Backend: Pure client-side rendering
• 🎯 Easy Integration: Simple API with sensible defaults

📦 Installation

npm install react-file-preview-auto

Peer Dependencies

This library requires React 18+:

npm install react react-dom

🚀 Quick Start

import { FilePreview } from 'react-file-preview-auto';
import 'react-file-preview-auto/dist/index.css';

function App() {
  return (
    <div className="App">
      <FilePreview url="https://example.com/document.pdf" />
    </div>
  );
}

📖 Usage Examples

Basic PDF Preview

import { FilePreview } from 'react-file-preview-auto';
import 'react-file-preview-auto/dist/index.css';

function PDFViewer() {
  return (
    <FilePreview url="https://example.com/sample.pdf" />
  );
}

Excel File Preview

function ExcelViewer() {
  return (
    <FilePreview url="https://example.com/spreadsheet.xlsx" />
  );
}

Using Individual Viewers

You can also import and use individual viewer components:

import { PDFViewer, ExcelViewer, WordViewer } from 'react-file-preview-auto';
import 'react-file-preview-auto/dist/index.css';

function CustomViewer() {
  return (
    <div>
      <PDFViewer url="https://example.com/document.pdf" />
      <ExcelViewer 
        excelData={{
          sheets: ['Sheet1'],
          currentSheet: 'Sheet1',
          sheetsData: { /* ... */ }
        }} 
      />
    </div>
  );
}

🎯 Supported File Types

Documents

• PDF (.pdf) - Native PDF.js viewer
• Word (.doc, .docx) - OneDrive/Client-side/Google fallback
• PowerPoint (.ppt, .pptx) - OneDrive/Client-side/Google fallback

Spreadsheets

• Excel (.xls, .xlsx) - OneDrive/Client-side/Google fallback
• CSV (.csv) - Text viewer with syntax highlighting

Images

• Formats: .png, .jpg, .jpeg, .gif, .webp, .svg

Videos

• Formats: .mp4, .webm, .ogg

Code & Text Files

• Languages: JavaScript, TypeScript, Python, Java, C++, PHP, Ruby, Go, Rust, Swift, Kotlin
• Markup: HTML, CSS, SCSS, XML, YAML, JSON, Markdown
• Scripts: Bash, PowerShell, SQL
• Others: .txt, .log, .diff, .patch

🔧 API Reference

FilePreview Component

Main component for file preview with automatic type detection.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | url | string | Yes | Public URL of the file to preview |

Example

<FilePreview url="https://example.com/file.pdf" />

Individual Viewer Components

PDFViewer

<PDFViewer 
  url="https://example.com/document.pdf"
  onError={(error) => console.error(error)}
/>

ExcelViewer

<ExcelViewer 
  excelData={{
    sheets: ['Sheet1', 'Sheet2'],
    currentSheet: 'Sheet1',
    sheetsData: {
      Sheet1: {
        data: [[/* row data */]],
        maxColumns: 10
      }
    },
    scale: 1
  }}
  onError={(error) => console.error(error)}
/>

WordViewer

<WordViewer 
  url="https://example.com/document.docx"
  onError={(error) => console.error(error)}
/>

PowerPointViewer

<PowerPointViewer 
  url="https://example.com/presentation.pptx"
  onError={(error) => console.error(error)}
/>

TextViewer

<TextViewer url="https://example.com/code.js" />

🎨 Styling

The library includes pre-built CSS with modern styling. Import it in your app:

import 'react-file-preview-auto/dist/index.css';

Custom Styling

You can override the default styles by targeting the component classes:

.file-preview-container {
  /* Your custom styles */
}

.office-viewer iframe {
  /* Custom iframe styles */
}

💡 Important Notes

CORS Requirements

Files must be served with proper CORS headers to be previewed:

Access-Control-Allow-Origin: *

Public URLs Only

The file URL must be publicly accessible from the internet for OneDrive and Google Docs viewers to work.

Fallback System

The library uses a smart fallback system:

1. OneDrive Viewer (Primary) - Best for Office files
2. Client-side Rendering (Fallback) - Works offline
3. Google Docs Viewer (Last Resort) - Maximum compatibility

🔨 Framework Integration

Create React App

import { FilePreview } from 'react-file-preview-auto';
import 'react-file-preview-auto/dist/index.css';

function App() {
  return <FilePreview url="https://example.com/file.pdf" />;
}

Next.js

'use client'; // For Next.js 13+ App Router

import { FilePreview } from 'react-file-preview-auto';
import 'react-file-preview-auto/dist/index.css';

export default function PreviewPage() {
  return <FilePreview url="https://example.com/file.pdf" />;
}

Vite

import { FilePreview } from 'react-file-preview-auto';
import 'react-file-preview-auto/dist/index.css';

function App() {
  return <FilePreview url="https://example.com/file.pdf" />;
}

🐛 Troubleshooting

File Not Loading

1. Verify the URL is publicly accessible
2. Check CORS headers on the file server
3. Ensure the file extension is supported
4. Check browser console for errors

Styling Issues

Make sure to import the CSS file:

import 'react-file-preview-auto/dist/index.css';

Mobile Issues

Some viewers (especially OneDrive) may not work on mobile. The library automatically falls back to client-side rendering.

📄 License

MIT © Phong Nguyen

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🔗 Links

• npm Package
• GitHub Repository

📝 Changelog

1.0.1 (2026-02-06)

• Removed PDF viewer toolbar for cleaner interface
• Fixed PDF page margin styling
• UI improvements

1.0.0 (2026-02-06)

• Initial release
• Support for PDF, Office documents, images, videos, and code files
• Smart fallback system with OneDrive, client-side, and Google Docs viewers
• Modern UI with glassmorphism effects
• Responsive design for mobile and desktop