PDFSlick for React is a library which enables viewing of and interaction with PDF documents in React apps. It's build on top of Mozilla's PDF.js, and utilises Zustand to provide a reactive store for the loaded documents.
To get started with React run:
npm install @pdfslick/react
# yarn add @pdfslick/react
# pnpm add @pdfslick/react
You can start using PDFSlick with the usePDFSlick()
hook, like with the following basic example:
import { usePDFSlick } from "@pdfslick/react";
import PDFNavigation from "./yourcomponents/PDFNavigation";
//
// It is required to include PDFSlick's CSS styles once
// you can do it in your main `App.tsx` for example
//
import "@pdfslick/react/dist/pdf_viewer.css";
type PDFViewerComponentProps = {
pdfFilePath: string,
};
const PDFViewerComponent = ({ pdfFilePath }: PDFViewerComponent) => {
const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(
pdfFilePath,
{
scaleValue: "page-fit",
}
);
/*
Access the store with `usePDFSlickStore()` hook — you can pass is
as a prop to other components (like with `<PDFNavigation />` below)
Toolbars, Sidebars, components which render thumbnails etc.
and use it as here to get and react on
PDF document's and viewer's properties and changes
*/
const scale = usePDFSlickStore((s) => s.scale);
const numPages = usePDFSlickStore((s) => s.numPages);
const pageNumber = usePDFSlickStore((s) => s.pageNumber);
return (
<div className="absolute inset-0 pdfSlick">
<div className="relative h-full">
<PDFSlickViewer {...{ viewerRef, usePDFSlickStore }} />
{/*
Pass PDFSlick's store to your custom components
*/}
<PDFNavigation {...{ usePDFSlickStore }} />
{/*
PDFSlick's store values automatically update
*/}
<div className="absolute w-full top-0 left-0">
<p>Current scale: {scale}</p>
<p>Current page number: {pageNumber}</p>
<p>Total number of pages: {numPages}</p>
</div>
</div>
</div>
);
};
export default PDFViewerComponent;
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 theref
callback that is provided as a prop to the<PDFSlickViewer />
component -
usePDFSlickStore
enables using PDFSlick store within your React components
More on using PDFSlick with React | Checkout the React Examples
- Vane Kosturanov for designing the logo
- VS Code Icons for the icons used throughout the examples