lector

A composable, headless PDF viewer toolkit for React applications, powered by PDF.js. Build feature-rich PDF viewing experiences with full control over the UI and functionality.

Installation

npm install @unriddle-ai/lector pdfjs-dist

# or with yarn
yarn add @unriddle-ai/lector pdfjs-dist

# or with pnpm
pnpm add @unriddle-ai/lector pdfjs-dist

Basic Usage

Here's a simple example of how to create a basic PDF viewer:

import { CanvasLayer, Page, Pages, Root, TextLayer } from "@unriddle-ai/lector";
import "pdfjs-dist/web/pdf_viewer.css";

export default function PDFViewer() {
  return (
    <Root
      fileURL='/sample.pdf'
      className='w-full h-[500px] border overflow-hidden rounded-lg'
      loader={<div className='p-4'>Loading...</div>}>
      <Pages className='p-4'>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}

Features

• 📱 Responsive and mobile-friendly
• 🎨 Fully customizable UI components
• 🔍 Text selection and search functionality
• 📑 Page thumbnails and outline navigation
• 🌗 First-class dark mode support
• 🖱️ Pan and zoom controls
• 📝 Form filling support
• 🔗 Internal and external link handling

Contributing

We welcome contributions! Key areas we're focusing on:

1. Performance optimizations
2. Accessibility improvements
3. Mobile/touch interactions
4. Documentation and examples

Thanks

Special thanks to these open-source projects that provided inspiration:

• react-pdf-headless
• pdfreader

License

MIT © Unriddle AI