High-performance, linearized PDF viewer for React applications.
- β‘ 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)
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-viewerimport { 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,
}}
/>
);
}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
In addition to the main PDFViewer component, this package exposes:
- Hooks
usePDFDocumentusePageStateusePageRendereruseZoomuseSearch
- Components
PDFCanvasPDFControlsPDFThumbnails
- Utilities
isLinearizedPDFdownloadPDFcalculateScaleForPageFitformatFileSizeextractPageTextlinearizedPDFConfiggetOptimalRangeHeadercreateProgressiveFetchHandler
MIT
