@page-speed/pdf-viewer
v0.1.8
Published
High-performance PDF viewer for restaurant menus, catalogs, and documents
Downloads
1,447
Maintainers
Readme

📑 @page-speed/pdf-viewer
High-performance, linearized PDF viewer for React applications.
Features
- ⚡ Sub-1-second page rendering
- 📄 Support for linearized PDFs with progressive loading
- 🔍 Full-text search across all pages
- 🔎 Zoom in/out with keyboard shortcuts
- 📱 Mobile-responsive design
- 🎯 Page navigation with input
- 💾 Download & print support
- 🎨 Customizable controls
- 🚀 <30 KB base bundle (target)
Installation
You can install the package with any Node package manager:
npm install @page-speed/pdf-viewer
# or
pnpm add @page-speed/pdf-viewer
# or
yarn add @page-speed/pdf-viewerQuick Start
import { PDFViewer } from '@page-speed/pdf-viewer';
export function MenuViewer() {
return (
<PDFViewer
url="/menus/spring-menu.pdf"
title="Spring Menu"
height="600px"
config={{
showControls: true,
enableDownload: true,
}}
/>
);
}Configuration
PDFViewer accepts the following key props:
url: string– PDF URL or file path (required)title?: string– optional document titleheight?: string | number– container height (default600px)width?: string | number– container width (default100%)config?: Partial<PDFViewerConfig>– viewer configuration options
PDFViewerConfig includes:
initialPage?: numberinitialZoom?: number | 'auto' | 'page-fit' | 'page-width'textSelection?: booleansearch?: booleanshowControls?: booleanshowThumbnails?: booleanenableDownload?: booleanenablePrint?: booleanenableFullscreen?: booleanworkerUrl?: stringcacheSize?: numberprogressiveLoading?: boolean
Hooks & Utilities
In addition to the main PDFViewer component, this package exposes:
- Hooks
usePDFDocumentusePageStateusePageRendereruseZoomuseSearch
- Components
PDFCanvasPDFControlsPDFThumbnails
- Utilities
isLinearizedPDFdownloadPDFcalculateScaleForPageFitformatFileSizeextractPageTextlinearizedPDFConfiggetOptimalRangeHeadercreateProgressiveFetchHandler
License
MIT
