npm package: @pdfslick/solid
Description: PDFSlick SolidJS — view and interact with PDF documents in your SolidJS apps.
Author: Vancho Stojkov
Latest version: 3.1.0

<br><br>

![readme-header](https://pdfslick.dev/pdfslick_logo.svg)

<br><br>

<div align="center">
View and Interact with PDF documents in SolidJS apps
<br><br>

[Getting Started](https://pdfslick.dev/docs) | [Examples](https://pdfslick.dev/examples)

<br><br>

</div>

---

<br>

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](https://github.com/mozilla/pdf.js), and utilises [Zustand](https://github.com/pmndrs/zustand) to provide a reactive store for the loaded documents.

## Getting started with PDFSlick for SolidJS

To get started with PDFSlick for SolidJS run:

```shell
npm install @pdfslick/solid
# yarn add @pdfslick/solid
# pnpm add @pdfslick/solid
```

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

```jsx
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:

- `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 `<PDFSlickViewer />` component
- `pdfSlickStore` is the PDFSlick store

<br>

[More on using PDFSlick with Solid](https://pdfslick.dev/docs/solid) | [Checkout the SolidJS Examples](./apps/solidweb/src/examples)

## Author

PDFSlick was conceived and developed, and is currently maintained by [Vancho Stojkov](https://github.com/van100j), who embarked on this project with the vision of simplifying PDF integration for modern web frameworks, leveraging the power of PDF.js while providing a developer-friendly API.

## Thanks

- [Vane Kosturanov](https://kosturanov.com/portfolio/logo-branding-design) for designing the logo
- [VS Code Icons](https://github.com/microsoft/vscode-codicons) for the icons used throughout the examples