\n\n---\n\n \n\nPDFSlick for React is a library which enables viewing of and interaction with PDF documents in React apps.\nIt'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.\n\n## Getting started with PDFSlick for React\n\nTo get started with React run:\n\n```shell\nnpm install @pdfslick/react\n# yarn add @pdfslick/react\n# pnpm add @pdfslick/react\n```\n\nYou can start using PDFSlick with the `usePDFSlick()` hook, like with the following basic example:\n\n```jsx\nimport { usePDFSlick } from \"@pdfslick/react\";\nimport PDFNavigation from \"./yourcomponents/PDFNavigation\";\n\n//\n// It is required to include PDFSlick's CSS styles once\n// you can do it in your main `App.tsx` for example\n//\nimport \"@pdfslick/react/dist/pdf_viewer.css\";\n\ntype PDFViewerComponentProps = {\n pdfFilePath: string,\n};\n\nconst PDFViewerComponent = ({ pdfFilePath }: PDFViewerComponent) => {\n const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(\n pdfFilePath,\n {\n scaleValue: \"page-fit\",\n }\n );\n\n /*\n Access the store with `usePDFSlickStore()` hook — you can pass is\n as a prop to other components (like with `` below)\n Toolbars, Sidebars, components which render thumbnails etc. \n and use it as here to get and react on \n PDF document's and viewer's properties and changes\n */\n const scale = usePDFSlickStore((s) => s.scale);\n const numPages = usePDFSlickStore((s) => s.numPages);\n const pageNumber = usePDFSlickStore((s) => s.pageNumber);\n\n return (\n
\n
\n \n\n {/*\n Pass PDFSlick's store to your custom components\n */}\n \n\n {/*\n PDFSlick's store values automatically update\n */}\n
\n
Current scale: {scale}
\n
Current page number: {pageNumber}
\n
Total number of pages: {numPages}
\n
\n
\n
\n );\n};\n\nexport default PDFViewerComponent;\n```\n\nProvided with the PDF Document path and PDFSlick options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:\n\n- `PDFSlickViewer` is the PDF Viewer component used for viewing the PDF document\n- `viewerRef` is the `ref` callback that is provided as a prop to the `` component\n- `usePDFSlickStore` enables using PDFSlick store within your React components\n\n \n\n[More on using PDFSlick with React](https://pdfslick.dev/docs/react) | [Checkout the React Examples](./apps/web/examples)\n\n## Author\n\nPDFSlick 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.\n\n## Thanks\n\n- [Vane Kosturanov](https://kosturanov.com/portfolio/logo-branding-design) for designing the logo\n- [VS Code Icons](https://github.com/microsoft/vscode-codicons) for the icons used throughout the examples\n","readmeFilename":"README.md"}