Lector

Lector provides a set of composable components that you can use to build a custom PDF viewer. This guide will walk you through the core concepts and basic usage.

Core Concepts

Lector follows a component-based architecture with three main layers:

Root Container: Manages the PDF document state and context
Pages Container: Handles page layout and virtualization
Layer Components: Render different aspects of each page (canvas, text, annotations)

Basic Setup

First, set up the PDF.js worker:

import { GlobalWorkerOptions } from "pdfjs-dist";
import "pdfjs-dist/web/pdf_viewer.css";
 
// Set up the worker
GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.mjs",
  import.meta.url
).toString();

Creating a Basic Viewer

Here's a minimal example of a PDF viewer:

import { Root, Pages, Page, CanvasLayer, TextLayer } from "@unriddle-ai/lector";
 
function PDFViewer() {
  return (
    <Root fileURL='/sample.pdf' className='w-full h-[600px] border rounded-lg overflow-hidden'>
      <Pages className='p-4'>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}

Core Components

Root Component

The Root component is the main container that manages the PDF document state:

<Root
  fileURL='/path/to/pdf' // URL or path to PDF file
  className='...' // Container styling
  loader={<Loading />} // Custom loading component
  onLoad={handleLoad} // Called when PDF is loaded
  onError={handleError} // Called on load error
>
  {/* Child components */}
</Root>

Pages Component

The Pages component handles page layout and virtualization:

<Pages
  className='...' // Container styling
>
  {/* Page component */}
</Pages>

Page Layers

Each page can have multiple layers for different functionality:

<Page>
  <CanvasLayer /> {/* Renders the PDF content */}
  <TextLayer /> {/* Enables text selection */}
  <AnnotationLayer /> {/* Renders annotations and links */}
  <HighlightLayer /> {/* Custom highlight overlay */}
</Page>

Common Features

Adding Zoom Controls

import { ZoomIn, ZoomOut, CurrentZoom } from "@unriddle-ai/lector";
 
function PDFViewerWithZoom() {
  return (
    <Root fileURL='/sample.pdf'>
      <div className='flex gap-2 p-2'>
        <ZoomOut />
        <CurrentZoom />
        <ZoomIn />
      </div>
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}

import { CurrentPage, PageCount } from "@unriddle-ai/lector";
 
function PDFViewerWithNavigation() {
  return (
    <Root fileURL='/sample.pdf'>
      <div className='flex items-center gap-2 p-2'>
        <CurrentPage /> of <PageCount />
      </div>
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}