@pdfslick/core 1.1.3 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +90 -31
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <br><br>
6
6
  <div align="center">
7
- View and Interact with PDFs in React and SolidJS apps
7
+ View and Interact with PDF documents in React and SolidJS apps
8
8
  <br><br>
9
9
 
10
10
  [Getting Started](https://pdfslick.dev/docs) | [Examples](https://pdfslick.dev/examples)
@@ -15,20 +15,16 @@ View and Interact with PDFs in React and SolidJS apps
15
15
  ---
16
16
  <br>
17
17
 
18
- PDFSlick is a library that enables viewing of and interaction with PDF documents in React and SolidJS apps.
18
+ PDFSlick is a library which enables viewing of and interaction with PDF documents in React and SolidJS apps.
19
19
  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.
20
20
 
21
- ## Motivation
22
-
23
- [PDF.js](https://github.com/mozilla/pdf.js) is an amazing piece of software. It is also a very stable and mature one — it powers the PDF viewer in Mozilla Firefox and it's been around since 2011. However, it's all Vanilla JavaScript, and when it comes to using it with libraries like React and SolidJS (although possible) it's a litte bit hard in terms of integrating it in these Component- and reactive-like environments. PDFSlick attempts to wrap all of that fascinating functionality into one that is easier to fit in React and SolidJS worlds — as components and a reactive store.
24
-
25
21
  ## Core Concepts
26
22
 
27
23
  The core of PDFSlick is within the `@pdfslick/core` package. It wraps `PDF.js`'s functionality and links it to the store. This `@pdfslick/core` package is the basis for the React and SolidJS packages, which additionally transform the store and make it suitable for the adequate library, as well as providing components for the PDF viewer and thumbnails.
28
24
 
29
25
  Depending on your needs, at this you might find it useful to continue with learning more about using PDFSlick with React and SolidJS respsectivelly. However, if really interested you can learn more about using PDFSlick's `@pdfslick/core` package with Vanilla JS apps and with libraries other than React and SolidJS in the sections below.
30
26
 
31
- ## Getting Started with React
27
+ ## PDFSlick for React
32
28
 
33
29
  To get started with React run:
34
30
  ```shell
@@ -40,44 +36,74 @@ npm install @pdfslick/react
40
36
  You can start using PDFSlick with the `usePDFSlick()` hook, like with the following basic example:
41
37
  ```jsx
42
38
  import { usePDFSlick } from "@pdfslick/react";
43
- import PDFNavigation from "./PDFNavigation";
39
+ import PDFNavigation from "./yourcomponents/PDFNavigation";
44
40
 
41
+ //
42
+ // It is required to include PDFSlick's CSS styles once
43
+ // you can do it in your main `App.tsx` for example
44
+ //
45
45
  import "@pdfslick/react/dist/pdf_viewer.css";
46
46
 
47
- type PDFViewerAppProps = {
47
+ type PDFViewerComponentProps = {
48
48
  pdfFilePath: string;
49
49
  };
50
50
 
51
- const SimplePDFViewer = ({ pdfFilePath }: PDFViewerAppProps) => {
51
+ const PDFViewerComponent = ({ pdfFilePath }: PDFViewerComponent) => {
52
52
  const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(pdfFilePath, {
53
- singlePageViewer: true,
54
53
  scaleValue: "page-fit"
55
54
  });
56
55
 
56
+ /*
57
+ Access the store with `usePDFSlickStore()` hook — you can pass is
58
+ as a prop to other components (like with `<PDFNavigation />` below)
59
+ Toolbars, Sidebars, components which render thumbnails etc.
60
+ and use it as here to get and react on
61
+ PDF document's and viewer's properties and changes
62
+ */
63
+ const scale = usePDFSlickStore((s) => s.scale);
64
+ const numPages = usePDFSlickStore((s) => s.numPages);
65
+ const pageNumber = usePDFSlickStore((s) => s.pageNumber);
66
+
57
67
  return (
58
- <div className="absolute inset-0 bg-slate-200/70 pdfSlick">
59
- <div className="flex-1 relative h-full">
68
+ <div className="absolute inset-0 pdfSlick">
69
+ <div className="relative h-full">
60
70
  <PDFSlickViewer {...{ viewerRef, usePDFSlickStore }} />
71
+
72
+ {/*
73
+ Pass PDFSlick's store to your custom components
74
+ */}
61
75
  <PDFNavigation {...{ usePDFSlickStore }} />
76
+
77
+ {/*
78
+ PDFSlick's store values automatically update
79
+ */}
80
+ <div className="absolute w-full top-0 left-0">
81
+ <p>Current scale: {scale}</p>
82
+ <p>Current page number: {pageNumber}</p>
83
+ <p>Total number of pages: {numPages}</p>
84
+ </div>
62
85
  </div>
63
86
  </div>
64
87
  );
65
88
  };
66
89
 
67
- export default SimplePDFViewer;
90
+ export default PDFViewerComponent;
68
91
  ```
69
92
 
70
- Provided with the PDF Document path and options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:
71
- - `PDFSlickViewer` — the PDF Viewer component used for viewing the PDF document
72
- - `viewerRef` — a `RefCallback` that is provided as a prop to the `<PDFSlickViewer />` component
73
- - `usePDFSlickStore` — a hook to the PDFSlick store
93
+ Provided with the PDF Document path and PDFSlick options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:
94
+ - `PDFSlickViewer` is the PDF Viewer component used for viewing the PDF document
95
+ - `viewerRef` is the `ref` callback that is provided as a prop to the `<PDFSlickViewer />` component
96
+ - `usePDFSlickStore` enables using PDFSlick store within your React components
74
97
 
75
- <br><br>
76
- [Read more about using PDFSlick with React](https://pdfslick.dev/docs/react) | [Checkout the React Examples](./apps/web/examples)
98
+ <br>
99
+
100
+ [More on using PDFSlick with React](https://pdfslick.dev/docs/react) | [Checkout the React Examples](./apps/web/examples)
101
+
102
+ <br>
77
103
 
78
- ## SolidJS
104
+ ## PDFSlick for SolidJS
79
105
 
80
- To get started with PDFSlick for SolidJS React run:
106
+ To get started with PDFSlick for SolidJS run:
81
107
  ```shell
82
108
  npm install @pdfslick/solid
83
109
  # yarn add @pdfslick/solid
@@ -88,32 +114,65 @@ You can start using PDFSlick with the `usePDFSlick()` hook, like with the follow
88
114
  ```jsx
89
115
  import { Component, createSignal } from "solid-js";
90
116
  import { usePDFSlick } from "@pdfslick/solid";
117
+ import PDFNavigation from "./yourcomponents/PDFNavigation";
118
+
119
+ //
120
+ // It is required to include PDFSlick's CSS styles once
121
+ // you can do it in your main `App.tsx` for example
122
+ //
123
+ import "@pdfslick/solid/dist/pdf_viewer.css";
91
124
 
92
- type PDFViewerAppProps = {
125
+ type PDFViewerComponentProps = {
93
126
  pdfFilePath: string;
94
127
  };
95
128
 
96
- const PDFViewerApp: Component<PDFViewerAppProps> = ({ pdfFilePath }) => {
129
+ const PDFViewerComponent: Component<PDFViewerComponentProps> = ({ pdfFilePath }) => {
97
130
  const { viewerRef, pdfSlickStore: store, PDFSlickViewer } =
98
131
  usePDFSlick(pdfFilePath);
99
132
 
100
133
  return (
101
- <div class="absolute inset-0 bg-slate-200/70 flex flex-col pdfSlick">
134
+ <div class="absolute inset-0 flex flex-col pdfSlick">
102
135
  <div class="flex-1 relative h-full">
103
136
  <PDFSlickViewer {...{ store, viewerRef }} />
137
+
138
+ {/*
139
+ Pass PDFSlick's store to your custom components (like the `<PDFNavigation />` below) —
140
+ Toolbars, Sidebars, components which render thumbnails etc.
141
+ and use it as here to get and react on
142
+ PDF document and viewer properties and changes
143
+ */}
144
+ <PDFNavigation {...{ store }} />
145
+
146
+ {/*
147
+ PDFSlick's store values automatically update
148
+ */}
149
+ <div className="absolute w-full top-0 left-0">
150
+ <p>Current scale: {store.scale}</p>
151
+ <p>Current page number: {store.pageNumber}</p>
152
+ <p>Total number of pages: {store.numPages}</p>
153
+ </div>
104
154
  </div>
105
155
  </div>
106
156
  );
107
157
  };
108
158
 
109
- export default PDFViewerApp;
159
+ export default PDFViewerComponent;
110
160
  ```
111
161
 
112
162
  Provided with the PDF Document path and options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:
113
- - `PDFSlickViewer` — the PDF Viewer component used for viewing the PDF document
114
- - `viewerRef` — a `RefCallback` that is provided as a prop to the `<PDFSlickViewer />` component
115
- - `pdfSlickStore` — the PDFSlick store
163
+ - `PDFSlickViewer` is the PDF Viewer component used for viewing the PDF document
164
+ - `viewerRef` is the `ref` callback that is provided as a prop to the `<PDFSlickViewer />` component
165
+ - `pdfSlickStore` is the PDFSlick store
166
+
167
+ <br>
168
+
169
+ [More on using PDFSlick with Solid](https://pdfslick.dev/docs/solid) | [Checkout the SolidJS Examples](./apps/solidweb/src/examples)
170
+
171
+ <br>
172
+
173
+ [Learn more about PDFSlick](https://pdfslick.dev) | [Checkout the Examples](https://pdfslick.dev/examples)
116
174
 
117
- <br><br>
118
- [Read more about using PDFSlick with SolidJS](https://pdfslick.dev/docs/solid) | [Checkout the SolidJS Examples](./apps/solidweb/src/examples)
119
175
 
176
+ ## Thanks
177
+ - [Vane Kosturanov](https://kosturanov.com/portfolio/logo-branding-design) for designing the logo
178
+ - [VS Code Icons](https://github.com/microsoft/vscode-codicons) for the icons used throughout the examples
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pdfslick/core",
3
- "version": "1.1.3",
3
+ "version": "1.1.5",
4
4
  "source": "./index.ts",
5
5
  "main": "dist/umd/index.js",
6
6
  "module": "dist/esm/index.js",