npm package: @monime/pdf-viewer
Description: A PDF viewer component for React
Latest version: 0.0.5

# 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:

```bash
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:

```bash
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

```tsx
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

```tsx
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:
   ```bash
   npm install
   ```
3. Start the development server:
   ```bash
   npm start
   ```

### Building for Production

```bash
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.