You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**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,41 +47,63 @@ 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&utm_medium=referral).
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
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
61
- React version: >= 19.0
62
62
63
-
If you are working with a React framework such as Nextand 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.
64
64
65
-
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.
66
66
67
-
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.
68
68
69
69
_Remark: <br/>- If using TypeScript, it requires >= TypeScript 4.6._
70
70
71
71
### Browser support
72
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`.
To change the version of PDF.js used, refer to [Dependency Override](/usage-guide/overriding-dependency) guide.
76
98
77
99
## 2. Install the Package
78
100
79
-
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`.
80
102
81
103
### Using bun:
82
104
83
105
```bash
84
-
bun add @pdf-viewer/react
106
+
bun add @react-pdf-kit/viewer
85
107
```
86
108
87
109
##### Caching of previous Worker version with `bun`
@@ -96,103 +118,103 @@ rm -R node_modules
96
118
### Using npm:
97
119
98
120
```bash
99
-
npm install @pdf-viewer/react
121
+
npm install @react-pdf-kit/viewer
100
122
```
101
123
102
124
### Using yarn:
103
125
104
126
```bash
105
-
yarn add @pdf-viewer/react
127
+
yarn add @react-pdf-kit/viewer
106
128
```
107
129
108
130
### Using pnpm:
109
131
110
132
```bash
111
-
pnpm add @pdf-viewer/react
133
+
pnpm add @react-pdf-kit/viewer
112
134
```
113
135
114
-
For more information on how to use different package managers, please visit our [installation guide](https://docs.react-pdf.dev/introduction/getting-started/#installation?utm_source=github&utm_medium=referral).
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).
115
137
116
138
## 3. Import and Use the Component
117
139
118
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.
119
141
120
142
```tsx
121
-
<RPConfig> {/* Configuration license and pdfjs-dist worker */}
<RPConfig> {/* Configuration license and pdfjs-dist worker */}
144
+
<RPTheme> {/* Theme customization (optional) */}
145
+
<RPProvider> {/* Viewer context provider */}
146
+
<RPLayouttoolbar> {/* Provide the default toolbar structure */}
147
+
<RPPages /> {/* Render the actual PDF content */}
148
+
</RPLayout>
128
149
</RPProvider>
129
-
</RPConfig>
150
+
</RPTheme>
151
+
</RPConfig>
130
152
```
131
153
132
154
_Remark: For more information on each component, please refer to [Component](https://docs.react-pdf.dev/components/overview?utm_source=github&utm_medium=referral)._
133
155
134
156
### Basic Usage
135
157
136
-
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`.
137
159
138
160
Here's how to implement a basic PDF viewer in a React application:
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&utm_medium=referral)
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)
158
180
159
181
You may also check out our [Starter Toolkit](#pushpin-starter-toolkit) for examples to get you started.
160
182
161
183
### 4. Customize with Hooks and Props
162
184
163
-
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.
164
186
165
187
For detailed usage, refer to our [Documentation][reactpdf-docs].
166
188
167
189
# :pushpin: Starter Toolkit
168
190
169
191
Here are some sample projects to get started on React PDF quickly:
Check out our latest release [v1.19.0 (16 February 2026)](https://docs.react-pdf.dev/introduction/changelog/#v1190-16-february-2026?utm_source=github&utm_medium=referral)
217
+
Check out our latest release [v1.19.0 (16 February 2026)](https://docs.react-pdf-kit.dev/introduction/changelog/#v1190-16-february-2026?utm_source=github&utm_medium=referral)
196
218
197
219
198
220
# :raising_hand: Need Help?
@@ -201,9 +223,9 @@ We are more than happy to help you. If you have any questions, run into any erro
201
223
202
224
# :page_facing_up: License
203
225
204
-
React PDF is distributed under our proprietary license. Please refer to our [License page](https://www.react-pdf.dev/license-agreement?utm_source=github&utm_medium=referral) 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.
205
227
206
-
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.dev/contact-us](https://www.react-pdf.dev/contact-us?utm_source=github&utm_medium=referral).
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).
207
229
208
230
209
231
# Acknowledgement
@@ -212,7 +234,7 @@ If you would like to use React PDF commercially, please purchase a license from
0 commit comments