PDFSlick for Solid is a library that enables viewing of and interaction with PDF documents in SolidJS 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 PDFSlick for SolidJS run:
npm install @pdfslick/solid
# yarn add @pdfslick/solid
# pnpm add @pdfslick/solidYou can start using PDFSlick with the usePDFSlick() hook, like with the following basic example:
import { Component, createSignal } from "solid-js";
import { usePDFSlick } from "@pdfslick/solid";
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/solid/dist/pdf_viewer.css";
type PDFViewerComponentProps = {
pdfFilePath: string,
};
const PDFViewerComponent: Component<PDFViewerComponentProps> = ({
pdfFilePath,
}) => {
const {
viewerRef,
pdfSlickStore: store,
PDFSlickViewer,
} = usePDFSlick(pdfFilePath);
return (
<div class="absolute inset-0 flex flex-col pdfSlick">
<div class="flex-1 relative h-full">
<PDFSlickViewer {...{ store, viewerRef }} />
{/*
Pass PDFSlick's store to your custom components (like the `<PDFNavigation />` below) —
Toolbars, Sidebars, components which render thumbnails etc.
and use it as here to get and react on
PDF document and viewer properties and changes
*/}
<PDFNavigation {...{ store }} />
{/*
PDFSlick's store values automatically update
*/}
<div className="absolute w-full top-0 left-0">
<p>Current scale: {store.scale}</p>
<p>Current page number: {store.pageNumber}</p>
<p>Total number of pages: {store.numPages}</p>
</div>
</div>
</div>
);
};
export default PDFViewerComponent;Provided with the PDF Document path and options object, the usePDFSlick() hook returns an object consisting (among the other things) of:
-
PDFSlickVieweris the PDF Viewer component used for viewing the PDF document -
viewerRefis therefcallback that is provided as a prop to the<PDFSlickViewer />component -
pdfSlickStoreis the PDFSlick store
More on using PDFSlick with Solid | Checkout the SolidJS Examples
- Vane Kosturanov for designing the logo
- VS Code Icons for the icons used throughout the examples