PDFSlick

View and Interact with PDFs in React SolidJS, Svelte and JavaScript apps

PDFReactSvelteSolid
pdfslick/pdfslickpdfslick.dev@pdfslick/react

README

readme-header

View and Interact with PDF documents in React, SolidJS, Svelte and JavaScript apps

PDFSlick is a library that enables viewing of and interaction with PDF documents in React, SolidJS, Svelte and JavaScript apps.
It's build on top of Mozilla's PDF.js, and utilises Zustand to provide a reactive store for the loaded documents.

PDFSlick for React


To get started with React run:

  1. ```shell
  2. npm install @pdfslick/react
  3. # yarn add @pdfslick/react
  4. # pnpm add @pdfslick/react
  5. ```

You can start using PDFSlick with the usePDFSlick() hook, like with the following basic example:

  1. ```jsx
  2. import { usePDFSlick } from "@pdfslick/react";
  3. import PDFNavigation from "./yourcomponents/PDFNavigation";
  4. import "@pdfslick/react/dist/pdf_viewer.css";

  6. type PDFViewerComponentProps = {
  7.   pdfFilePath: string,
  8. };

  10. const PDFViewerComponent = ({ pdfFilePath }: PDFViewerComponent) => {
  11.   const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(
  12.     pdfFilePath,
  13.     {
  14.       scaleValue: "page-fit",
  15.     }
  16.   );

  18.   const scale = usePDFSlickStore((s) => s.scale);
  19.   const numPages = usePDFSlickStore((s) => s.numPages);
  20.   const pageNumber = usePDFSlickStore((s) => s.pageNumber);

  22.   return (
  23.     <div className="absolute inset-0 pdfSlick">
  24.       <div className="relative h-full">
  25.         <PDFSlickViewer {...{ viewerRef, usePDFSlickStore }} />

  27.         {/*
  28.           Pass PDFSlick's store to your custom components
  29.         */}
  30.         <PDFNavigation {...{ usePDFSlickStore }} />

  32.         {/*
  33.           PDFSlick's store values automatically update
  34.         */}
  35.         <div className="absolute w-full top-0 left-0">
  36.           <p>Current scale: {scale}</p>
  37.           <p>Current page number: {pageNumber}</p>
  38.           <p>Total number of pages: {numPages}</p>
  39.         </div>
  40.       </div>
  41.     </div>
  42.   );
  43. };

  45. export default PDFViewerComponent;
  46. ```

Provided with the PDF Document path and PDFSlick options object, the usePDFSlick() hook returns an object consisting (among the other things) of:

- PDFSlickViewer is the PDF Viewer component used for viewing the PDF document
- `viewerRef` is the `ref` callback that is provided as a prop to the `` component
- usePDFSlickStore enables using PDFSlick store within your React components