Skip to content

πŸ“‘ React PDF viewer component pre-configured for performance with Sub-1-second page rendering, progressive loading while still enabling a comprehensive set of features.

Notifications You must be signed in to change notification settings

opensite-ai/page-speed-pdf-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

34 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Page Speed React PDF Viewer

πŸ“‘ @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-viewer

Quick 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 title
  • height?: string | number – container height (default 600px)
  • width?: string | number – container width (default 100%)
  • config?: Partial<PDFViewerConfig> – viewer configuration options

PDFViewerConfig includes:

  • initialPage?: number
  • initialZoom?: number | 'auto' | 'page-fit' | 'page-width'
  • textSelection?: boolean
  • search?: boolean
  • showControls?: boolean
  • showThumbnails?: boolean
  • enableDownload?: boolean
  • enablePrint?: boolean
  • enableFullscreen?: boolean
  • workerUrl?: string
  • cacheSize?: number
  • progressiveLoading?: boolean

Hooks & Utilities

In addition to the main PDFViewer component, this package exposes:

  • Hooks
    • usePDFDocument
    • usePageState
    • usePageRenderer
    • useZoom
    • useSearch
  • Components
    • PDFCanvas
    • PDFControls
    • PDFThumbnails
  • Utilities
    • isLinearizedPDF
    • downloadPDF
    • calculateScaleForPageFit
    • formatFileSize
    • extractPageText
    • linearizedPDFConfig
    • getOptimalRangeHeader
    • createProgressiveFetchHandler

License

MIT

About

πŸ“‘ React PDF viewer component pre-configured for performance with Sub-1-second page rendering, progressive loading while still enabling a comprehensive set of features.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •