Zoom Control

"use client";
 
import {
  CanvasLayer,
  CurrentZoom,
  Page,
  Pages,
  Root,
  TextLayer,
  ZoomIn,
  ZoomOut,
} from "@anaralabs/lector";
 
const ViewerZoomControl = () => {
  return (
    <Root
      source="/pdf/document.pdf"
      className="bg-gray-100 border rounded-md overflow-hidden relative h-[500px] flex flex-col justify-stretch"
      loader={<div className="p-4">Loading...</div>}
      zoomOptions={{
        minZoom: 0.5, // 50% minimum zoom
        maxZoom: 10, // 1000% maximum zoom
      }}
    >
      <div className="bg-gray-100 border-b p-1 flex items-center justify-center text-sm text-gray-600 gap-2">
        Zoom
        <ZoomOut className="px-3 py-1 -mr-2 text-gray-900">-</ZoomOut>
        <CurrentZoom className="bg-white rounded-full px-3 py-1 border text-center w-16" />
        <ZoomIn className="px-3 py-1 -ml-2 text-gray-900">+</ZoomIn>
      </div>
      <Pages className="p-4 h-full">
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
};
 
export default ViewerZoomControl;

<Root
  zoomOptions={{
    minZoom: 0.1,  // Allow 10% minimum zoom
    maxZoom: 20,   // Allow 2000% maximum zoom
  }}
>