@react-pdf-kit/viewer 2.0.1-rc.1 → 2.0.1-rc.3

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 (3) hide show
  1. package/README.md +84 -49
  2. package/dist/utils/hooks/useLicense.js +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <div align="center">
2
- <a href="https://www.react-pdf.dev/" target="_blank">
2
+ <a href="https://www.react-pdf-kit.dev/" target="_blank">
3
3
  <picture>
4
4
  <source srcset="https://raw.githubusercontent.com/pdf-viewer-react/react-pdf/2308e7d88cde64bf343f1509150ebf6c91a15664/assets/img/react-pdf_cover.webp" width="100%">
5
5
  <img alt="React PDF" src="https://raw.githubusercontent.com/pdf-viewer-react/react-pdf/2308e7d88cde64bf343f1509150ebf6c91a15664/assets/img/react-pdf_cover.webp" width="100%">
@@ -9,28 +9,28 @@
9
9
 
10
10
  <br/>
11
11
  <div align="center">
12
- Works seamlessly on your React.js websites. Fast, Customizable and Web Responsive PDF viewer. Save you weeks of development time.
12
+ Works seamlessly on your React or Next.js websites. Fast, Customizable and Web Responsive PDF viewer. Save you weeks of development time.
13
13
  </div>
14
14
  <br/>
15
15
 
16
16
  <div align="center">
17
17
 
18
- [React PDF Home][reactpdf] - [License](#page_facing_up-license) - [Documentation][reactpdf-docs]
18
+ [React PDF Kit Home][reactpdf] - [License](#page_facing_up-license) - [Documentation][reactpdf-docs]
19
19
 
20
- [![NPM Version](https://img.shields.io/npm/v/%40pdf-viewer%2Freact)][npm]
20
+ [![NPM Version](https://img.shields.io/npm/v/%40react-pdf-kit%2Fviewer)][npm]
21
21
  [![Twitter](https://img.shields.io/twitter/follow/ReactPDF?label=ReactPDF&style=social)][twitter]
22
22
 
23
23
  </div>
24
24
 
25
- # :star: Why React PDF
25
+ # :star: Why React PDF Kit
26
26
 
27
- - **Save Weeks of Development Time**: React PDF simplifies PDF integration with ready-to-use tools, minimizing the need for custom development and saving you valuable time.
27
+ - **Save Weeks of Development Time**: React PDF Kit simplifies PDF integration with ready-to-use tools, minimizing the need for custom development and saving you valuable time.
28
28
  - **Tailored for React.js**: React PDF is native to React.js, ensuring smooth integration into your projects.
29
29
  - **Customizability at Its Core**: Built with flexibility in mind, allowing you to match your application’s unique style and functionality.
30
30
  - **High-Performance & Rapid Rendering**: Optimized for rendering large PDFs efficiently, React PDF delivers lightning-fast load times with features like virtual scrolling.
31
- - **Accessibility**: Designed with inclusivity in mind, React PDF supports ARIA attributes, catering to diverse user bases.
32
- - **Modern Browser Compatibility**: Works seamlessly across modern browsers, eliminating compatibility headaches.
33
- - **Active Development & Support**: With regular updates and a responsive support team, React PDF evolves to meet developer needs.
31
+ - **Accessibility**: Designed with inclusivity in mind, React PDF Kit supports ARIA attributes, catering to diverse user bases.
32
+ - **Modern Browser Compatibility**: The React PDF Viewer components seamlessly across modern browsers, eliminating compatibility headaches.
33
+ - **Active Development & Support**: With regular updates and a responsive support team, React PDF Kit evolves to meet developer needs.
34
34
 
35
35
  # 📜 Background
36
36
 
@@ -47,35 +47,58 @@ As developers ourselves, we faced many issues such as browser incompatibility an
47
47
  - 📂 **Document Management Tools**, including features like downloading and printing.
48
48
  - 👁️ **Accessibility Support** to built-in support for ARIA attributes and tooltips, catering to diverse user bases.
49
49
 
50
- For the full feature set, visit [React PDF Features](https://www.react-pdf.dev/features?utm_source=github).
50
+ For the full feature set, visit [React PDF Kit Features](https://www.react-pdf-kit.dev/features?utm_source=github&utm_medium=referral).
51
51
 
52
52
  # :zap: Quick Start Guide
53
53
 
54
- Here’s how to get started with React PDF in your React.js project:
54
+ Here’s how to get started with React PDF Kit in your React.js project:
55
55
 
56
- ## 1. Check Prerequisites
56
+ ## 1. Check Prerequsities
57
57
 
58
- Here are the basic system requirements to run the React PDF component:
58
+ Here are the basic system requirements to run the React PDF Viewer component:
59
59
 
60
60
  - React version: >= 18.0
61
+ - React version: >= 19.0
61
62
 
62
- If you are working with a React framework such as Next and Gatsby, React PDF can run smoothly as long as you are using React 18 and above.
63
+ If you are working with a React framework such as Next.js (App Router and Pages Router) or Gatsby, React PDF can run smoothly as long as you are using React 18 and above.
63
64
 
64
- React PDF viewer also works well with other React.js UI libraries such as MUI, Ant Design and Chakra UI.
65
+ React PDF also works well with other React.js UI libraries such as MUI, Ant Design and Chakra UI.
65
66
 
66
- Although React PDF can run on most JavaScript module bundlers, it is more vigorously tested on Vite and Webpack.
67
+ Although React PDF Kit can run on most JavaScript module bundlers, it is more vigorously tested on Vite and Webpack.
67
68
 
68
69
  _Remark: <br/>- If using TypeScript, it requires >= TypeScript 4.6._
69
70
 
70
71
  ### Browser support
71
72
 
73
+ Starting from [`@react-pdf-kit/viewer@^2.0.0`](https://www.npmjs.com/package/@react-pdf-kit/viewer), we officially support PDF.js 5 and default to PDF.js `5.4.530`.
74
+
75
+ As newer PDF.js versions rely on more modern browser APIs, minimum supported browser versions have changed. Please review the compatibility details below before choosing a PDF.js version.
76
+
77
+ #### Default (PDF.js 5.4.530)
78
+
79
+ React PDF Kit v2.0.0 defaults to PDF.js `5.4.530`.
80
+
72
81
  | Chrome | Firefox | Edge | Safari | Safari iOS | Chrome Android |
73
82
  | ------ | ------- | ---- | ------ | ---------- | -------------- |
74
- | 115+ | 115+ | 115+ | 16.5+ | 16.5+ | 126+ |
83
+ | 126+ | 126+ | 126+ | 18.4+ | 18.4+ | 126+ |
84
+
85
+ <Aside>
86
+ It's currently not recommended to use a PDF.js worker version beyond `5.4.530` because it will support fewer browser versions.
87
+ </Aside>
88
+
89
+ #### Using PDF.js 4.10.38
90
+
91
+ If you need broader browser compatibility, you can continue using PDF.js `4.10.38`, which supports:
92
+
93
+ | Chrome | Firefox | Edge | Safari | Safari iOS | Chrome Android |
94
+ | ------ | ------- | ---- | ------ | ---------- | -------------- |
95
+ | 119+ | 115+ | 115+ | 17.4+ | 17.4+ | 126+ |
96
+
97
+ To change the version of PDF.js used, refer to [Dependency Override](https://docs.react-pdf-kit.dev/usage-guide/overriding-dependency?utm_source=github&utm_medium=referral) guide.
75
98
 
76
99
  ## 2. Install the Package
77
100
 
78
- There are a few ways you can install React PDF, namely `bun`, `npm`, `pnpm` or `yarn`.
101
+ There are a few ways you can install React PDF Kit, namely `bun`, `npm`, `pnpm` or `yarn`.
79
102
 
80
103
  ### Using bun:
81
104
 
@@ -110,50 +133,42 @@ yarn add @react-pdf-kit/viewer
110
133
  pnpm add @react-pdf-kit/viewer
111
134
  ```
112
135
 
113
- For more information on how to use different package managers, please visit our [installation guide](https://docs.react-pdf.dev/introduction/getting-started.html#installation?utm_source=github).
136
+ For more information on how to use different package managers, please visit our [installation guide](https://docs.react-pdf-kit.dev/introduction/getting-started/#installation?utm_source=github&utm_medium=referral).
114
137
 
115
138
  ## 3. Import and Use the Component
116
139
 
117
140
  The following structure demonstrates how to build a React PDF viewer by importing and assembling components. This modular approach gives you the flexibility to customize the viewer as needed.
118
141
 
119
142
  ```tsx
120
- <RPConfig>
121
- {' '}
122
- {/* Configuration license and pdfjs-dist worker */}
123
- <RPProvider>
124
- {' '}
125
- {/* Viewer context provider */}
126
- <RPTheme>
127
- {' '}
128
- {/* Theme customization (optional) */}
129
- <RPDefaultLayout>
130
- {' '}
131
- {/* Default layout container */}
132
- <RPPages /> {/* PDF pages renderer */}
133
- </RPDefaultLayout>
134
- </RPTheme>
135
- </RPProvider>
143
+ <RPConfig> {/* Configuration license and pdfjs-dist worker */}
144
+ <RPTheme> {/* Theme customization (optional) */}
145
+ <RPProvider> {/* Viewer context provider */}
146
+ <RPLayout toolbar> {/* Provide the default toolbar structure */}
147
+ <RPPages /> {/* Render the actual PDF content */}
148
+ </RPLayout>
149
+ </RPProvider>
150
+ </RPTheme>
136
151
  </RPConfig>
137
152
  ```
138
153
 
139
- _Remark: For more information on each component, please refer to [Component](https://docs.react-pdf.dev/components/overview?utm_source=github)._
154
+ _Remark: For more information on each component, please refer to [Component](https://docs.react-pdf-kit.dev/components/overview?utm_source=github&utm_medium=referral)._
140
155
 
141
156
  ### Basic Usage
142
157
 
143
- The most basic usage of React PDF viewer needs four components, namely: `RPConfig`, `RPProvider`, `RPDefaultLayout`, and `RPPages`.
158
+ The most basic usage of React PDF viewer needs four components, namely: `RPConfig`, `RPProvider`, `RPLayout`, and `RPPages`.
144
159
 
145
160
  Here's how to implement a basic PDF viewer in a React application:
146
161
 
147
162
  ```jsx
148
- import { RPProvider, RPDefaultLayout, RPPages, RPConfig } from '@react-pdf-kit/viewer'
163
+ import { RPProvider, RPLayout, RPPages, RPConfig } from '@react-pdf-kit/viewer'
149
164
 
150
165
  const App = () => {
151
166
  return (
152
167
  <RPConfig>
153
168
  <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
154
- <RPDefaultLayout style={{ height: '660px' }}>
169
+ <RPLayout toolbar style={{ height: '660px' }}>
155
170
  <RPPages />
156
- </RPDefaultLayout>
171
+ </RPLayout>
157
172
  </RPProvider>
158
173
  </RPConfig>
159
174
  )
@@ -161,13 +176,13 @@ const App = () => {
161
176
  export default App
162
177
  ```
163
178
 
164
- The PDF viewer will automatically adjust to fit its container's dimensions. You can control the size by setting the `style` prop on `RPDefaultLayout`. For more information on using React PDF, visit our [basic usage guide](https://docs.react-pdf.dev/introduction/basic-usage?utm_source=github)
179
+ The PDF viewer will automatically adjust to fit its container's dimensions. You can control the size by setting the `style` prop on `RPLayout`. For more information on using React PDF, visit our [basic usage guide](https://docs.react-pdf-kit.dev/introduction/basic-usage?utm_source=github&utm_medium=referral)
165
180
 
166
181
  You may also check out our [Starter Toolkit](#pushpin-starter-toolkit) for examples to get you started.
167
182
 
168
183
  ### 4. Customize with Hooks and Props
169
184
 
170
- To enhance React PDF further, we offer built-in hooks and props that let you fine-tune functionality, adjust appearance, and integrate custom behaviors into your application.
185
+ To enhance React PDF Kit further, we offer built-in hooks and props that let you fine-tune functionality, adjust appearance, and integrate custom behaviors into your application.
171
186
 
172
187
  For detailed usage, refer to our [Documentation][reactpdf-docs].
173
188
 
@@ -176,11 +191,31 @@ For detailed usage, refer to our [Documentation][reactpdf-docs].
176
191
  Here are some sample projects to get started on React PDF quickly:
177
192
 
178
193
  1. [React (webpack) - JavaScript](https://github.com/react-pdf-kit/starter-rp-react-js-webpack)
179
- 2. [React (webpack) - TypeScript](https://github.com/reactpdf/pdf-viewer-react/starter-rp-react-ts-webpack)
194
+ 2. [React (webpack) - TypeScript](https://github.com/react-pdf-kit/starter-rp-react-ts-webpack)
180
195
  3. [React (vite) - JavaScript](https://github.com/react-pdf-kit/starter-rp-react-js-vite)
181
196
  4. [React (vite) - TypeScript](https://github.com/react-pdf-kit/starter-rp-react-ts-vite)
182
- 5. [Next - JavaScript](https://github.com/react-pdf-kit/starter-rp-next-js)
183
- 6. [Next - TypeScript](https://github.com/react-pdf-kit/starter-rp-next-ts)
197
+ 5. [React (vite) - TypeScript - Turborepo](https://github.com/react-pdf-kit/starter-rp-react-vite-ts-turborepo)
198
+ 6. [Next.js - JavaScript (App Router)](https://github.com/react-pdf-kit/starter-rp-nextjs-app-router-js)
199
+ 7. [Next.js - TypeScript (App Router)](https://github.com/react-pdf-kit/starter-rp-nextjs-app-router-ts)
200
+ 8. [Next.js - JavaScript (Pages Router)](https://github.com/react-pdf-kit/starter-rp-nextjs-pages-router-js)
201
+ 9. [Next.js - TypeScript (Pages Router)](https://github.com/react-pdf-kit/starter-rp-nextjs-pages-router-ts)
202
+ 10. [Next.js - TypeScript - Turborepo](https://github.com/react-pdf-kit/starter-rp-next-ts-turborepo)
203
+ 11. [Remix - JavaScript](https://github.com/react-pdf-kit/starter-rp-remix-js)
204
+ 12. [Remix - TypeScript](https://github.com/react-pdf-kit/starter-rp-remix-ts)
205
+ 13. [Gatsby - JavaScript](https://github.com/react-pdf-kit/starter-rp-gatsby-js)
206
+ 14. [Gatsby - TypeScript](https://github.com/react-pdf-kit/starter-rp-gatsby-ts)
207
+ 15. [Docusaurus - JavaScript](https://github.com/react-pdf-kit/starter-rp-docusaurus-js)
208
+ 16. [Docusaurus - TypeScript](https://github.com/react-pdf-kit/starter-rp-docusaurus-ts)
209
+ 17. [Electron - JavaScript](https://github.com/react-pdf-kit/starter-rp-electron-js-vite)
210
+ 18. [Electron - TypeScript](https://github.com/react-pdf-kit/starter-rp-electron-ts-vite)
211
+ 19. [React Router - JavaScript](https://github.com/react-pdf-kit/starter-rp-react-router-js)
212
+ 20. [React Router - TypeScript](https://github.com/react-pdf-kit/starter-rp-react-router-ts)
213
+ 21. [TanStack - JavaScript](https://github.com/react-pdf-kit/starter-rp-tanstack-router-js)
214
+ 22. [TanStack - TypeScript](https://github.com/react-pdf-kit/starter-rp-tanstack-router-ts)
215
+
216
+ # 📝 Changelog
217
+
218
+ Check out our latest release [v2.0.0 (20 February 2026)](https://docs.react-pdf-kit.dev/introduction/changelog/#v200-20-february-2026?utm_source=github&utm_medium=referral)
184
219
 
185
220
  # :raising_hand: Need Help?
186
221
 
@@ -188,9 +223,9 @@ We are more than happy to help you. If you have any questions, run into any erro
188
223
 
189
224
  # :page_facing_up: License
190
225
 
191
- React PDF is distributed under our proprietary license. Please refer to our [License page](https://www.react-pdf.dev/license-agreement?utm_source=github) file for more details.
226
+ React PDF Kit is distributed under our proprietary license. Please refer to our [License page](https://www.react-pdf-kit.dev/license-agreement?utm_source=github&utm_medium=referral) file for more details.
192
227
 
193
- If you would like to use React PDF commercially, please purchase a license from [our website][reactpdf] or reach out to us directly at [david@react-pdf.dev](mailto:david@react-pdf.dev).
228
+ If you would like to use React PDF commercially, please purchase a license from [our website][reactpdf] or reach out to us directly at [https://www.react-pdf-kit.dev/contact-us](https://www.react-pdf-kit.dev/contact-us?utm_source=github&utm_medium=referral).
194
229
 
195
230
  # Acknowledgement
196
231
 
@@ -198,7 +233,7 @@ If you would like to use React PDF commercially, please purchase a license from
198
233
  - [Img Shields](https://shields.io)
199
234
  - [React.js](https://reactjs.org/)
200
235
 
201
- [reactpdf]: https://www.react-pdf.dev
202
- [reactpdf-docs]: https://docs.react-pdf.dev
236
+ [reactpdf]: https://www.react-pdf-kit.dev/?utm_source=github&utm_medium=referral
237
+ [reactpdf-docs]: https://docs.react-pdf-kit.dev/?utm_source=github&utm_medium=referral
203
238
  [npm]: https://www.npmjs.com/package/@react-pdf-kit/viewer
204
239
  [twitter]: https://www.x.com/ReactPDF
package/dist/utils/hooks/useLicense.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useState as E, useCallback as h, useEffect as A } from "react";
2
2
  import { appConsole as l } from "../appConsole.js";
3
- const b = /* @__PURE__ */ new Date("2026-02-24T06:36:48.609Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
3
+ const b = /* @__PURE__ */ new Date("2026-02-24T10:07:57.864Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
4
4
  invalidLicense: `You are currently using without a valid license. ${d}`,
5
5
  mismatchedDomain: `Your license key is not valid for the current domain / IP. ${d}`,
6
6
  expired: `Your license key has expired. ${d}`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-pdf-kit/viewer",
3
- "version": "2.0.1-rc.1",
3
+ "version": "2.0.1-rc.3",
4
4
  "private": false,
5
5
  "description": "A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.",
6
6
  "keywords": [