Lector

Implementation

"use client";
 
import { CanvasLayer, Page, Pages, Root, TextLayer } from "@anaralabs/lector";
import { useTheme } from "next-themes";
import React from "react";
import "@/lib/setup";
 
const fileUrl = "/pdf/pathways.pdf";
 
const Basic = () => {
  const { resolvedTheme } = useTheme();
 
  return (
    <Root
      source={fileUrl}
      className='w-full h-[500px] border overflow-hidden rounded-lg'
      loader={<div className='p-4'>Loading...</div>}
      colorScheme={resolvedTheme === "dark" ? "dark" : "light"}>
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
};
 
export default Basic;

The example above shows:

Basic PDF viewer setup with a fixed height container
Native dark mode rendering driven by the app theme via the colorScheme prop
Loading state handling
Canvas rendering of PDF pages
Text layer for text selection and copying

Basic Example

Implementation