FumadocsLector

Installation

Complete guide to installing and setting up Lector in your React application

Prerequisites

Before installing Lector, make sure you have:

  • Node.js 16.0 or later
  • A React project (version 16.8 or later)
  • npm, yarn, pnpm, or bun package manager

Installing the Package

  1. Install the main package and its peer dependency:
# Using npm
npm install @unriddle-ai/lector pdfjs-dist
 
# Using yarn
yarn add @unriddle-ai/lector pdfjs-dist
 
# Using pnpm
pnpm add @unriddle-ai/lector pdfjs-dist
 
# Using bun
bun add @unriddle-ai/lector pdfjs-dist

Setting up PDF.js Worker

  1. Configure the PDF.js worker in your application:

App Router (default)

In your PDF viewer component:

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();
 
export function PDFViewer() {
  return (
    <Root fileURL='/sample.pdf'>
      <Pages>
        <Page>
          <CanvasLayer />
        </Page>
      </Pages>
    </Root>
  );
}

Pages Directory

In your PDF viewer component:

import { Root, Pages, Page, CanvasLayer } from "@unriddle-ai/lector";
import "pdfjs-dist/build/pdf.worker.min.mjs";
import "pdfjs-dist/web/pdf_viewer.css";
 
export function PDFViewer() {
  return (
    <Root fileURL='/sample.pdf'>
      <Pages>
        <Page>
          <CanvasLayer />
        </Page>
      </Pages>
    </Root>
  );
}

Required Styles

  1. Import the required CSS styles. You can do this in your main CSS file or component:
// Import the default PDF viewer styles
import "pdfjs-dist/web/pdf_viewer.css";

Verifying Installation

To verify that Lector is properly installed, create a basic PDF viewer component:

import { Root, Pages, Page, CanvasLayer } from "@unriddle-ai/lector";
 
function BasicPDFViewer() {
  return (
    <Root fileURL='/sample.pdf'>
      <Pages>
        <Page>
          <CanvasLayer />
        </Page>
      </Pages>
    </Root>
  );
}

Troubleshooting

If you encounter any issues during installation:

  1. Make sure all peer dependencies are installed
  2. Check that the PDF.js worker is properly configured
  3. Verify that the required CSS files are imported
  4. Ensure your React version is compatible

Next Steps

Now that you have Lector installed, you can:

Learn Basic Usage

Get started with core components

View Examples

See Lector in action

Next

Basic Usage

On this page