PDF Viewer Project

A modern React PDF viewer component built with @embedpdf packages, featuring zoom controls, thumbnails, tiling for performance, and responsive design.

Features

• 📄 View PDF files from URLs or file uploads
• 🔍 Zoom controls with automatic fitting
• 🖼️ Thumbnail sidebar for quick navigation
• 🚀 High-performance tiling for large documents
• 📱 Responsive design
• ⚡ Fast rendering with Pdfium engine

Installation

To install the required packages, run:

npm install @embedpdf/core @embedpdf/engines @embedpdf/plugin-zoom @embedpdf/plugin-tiling @embedpdf/plugin-thumbnail @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-loader @embedpdf/plugin-render

Or if you prefer yarn:

yarn add @embedpdf/core @embedpdf/engines @embedpdf/plugin-zoom @embedpdf/plugin-tiling @embedpdf/plugin-thumbnail @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-loader @embedpdf/plugin-render

Usage

Basic Usage with File Upload

import React, { useState } from "react";
import PDFViewer from "./src/components/PdfViewer";

function App() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file && file.type === "application/pdf") {
      setSelectedFile(file);
    }
  };

  return (
    <div>
      <input type="file" accept=".pdf" onChange={handleFileChange} />
      {selectedFile && (
        <div style={{ height: "80vh" }}>
          <PDFViewer file={selectedFile} />
        </div>
      )}
    </div>
  );
}

Usage with PDF URL

import React from "react";
import PDFViewer from "./src/components/PdfViewer";

function App() {
  const pdfUrl = "https://example.com/sample.pdf";

  return (
    <div style={{ height: "100vh" }}>
      <PDFViewer file={pdfUrl} />
    </div>
  );
}

API Reference

PDFViewer Props

| Prop | Type | Required | Description | | ------ | ---------------- | -------- | ---------------------------------------- | | file | File \| string | Yes | PDF file object or URL string to display |

Configuration Options

The PDF viewer comes with pre-configured plugins that can be customized:

• Zoom Plugin: Supports automatic zoom fitting and manual zoom controls
• Tiling Plugin: Improves performance with large PDFs using tile-based rendering
• Thumbnail Plugin: Provides sidebar navigation with page thumbnails
• Scroll Plugin: Enables vertical scrolling through pages
• Viewport Plugin: Manages the viewing area and coordinates

Development

Project Structure

src/
├── components/
│   ├── PdfViewer.tsx          # Main PDF viewer component
│   └── PdfViewerElements.tsx  # UI elements (toolbar, sidebar, etc.)
├── contexts/
│   └── PdfViewerContext.tsx   # React context for state management
└── ...

Development Setup

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm start

Building for Production

npm run build

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Troubleshooting

PDF Not Loading

• Ensure the PDF file is valid and not corrupted
• Check that CORS is properly configured for PDF URLs
• Verify that the file size is reasonable for browser memory limits

Performance Issues

• Large PDFs are handled automatically with tiling
• Consider reducing the tileSize option for slower devices
• Ensure adequate memory is available for PDF processing

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.