Skip to content

Commit 17117e0

Browse files
ritz078ritz078
committed
Add React example for PSPDFKit integration
- Created a new React example project demonstrating the integration of PSPDFKit for Web. - Added essential files including package.json, README.md, and configuration files for React setup. - Implemented a basic layout with a PDF viewer using PSPDFKit, allowing users to open and view PDF documents. - Included scripts for verifying installation and copying necessary PSPDFKit files. - Added sample assets including PDF documents and favicon for demonstration. - Introduced .gitignore to exclude unnecessary files and directories. - Provided detailed instructions in the README for getting started and running the example.
1 parent 4fb12e3 commit 17117e0

20 files changed

+15371
-0
lines changed

‎examples/react/.gitignore

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
public/pspdfkit-lib

‎examples/react/LICENSE

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
The PSPDFKit Sample applications are licensed with a modified BSD
2+
license. In plain language: you're allowed to do whatever you wish
3+
with the code, modify, redistribute, embed in your products (free or
4+
commercial), but you must include copyright, terms of usage and
5+
disclaimer as stated in the license.
6+
7+
You will require a commercial PSPDFKit License to run these examples
8+
in non-demo mode. Please refer to [email protected] for details.
9+
10+
Copyright © 2017-present PSPDFKit GmbH.
11+
All rights reserved.
12+
13+
Redistribution and use in source or binary forms,
14+
with or without modification, are permitted provided
15+
that the following conditions are met:
16+
17+
- Redistributions of source code must retain the above copyright
18+
notice, this list of conditions and the following disclaimer.
19+
20+
- Redistributions in binary form must reproduce the above copyright
21+
notice, this list of conditions and the following disclaimer in the
22+
documentation and/or other materials provided with the
23+
distribution.
24+
25+
- Redistributions of PSPDFKit Samples must include attribution to
26+
PSPDFKit, either in documentation or other appropriate media.
27+
28+
- Neither the name of the PSPDFKit, PSPDFKit GmbH, nor its developers
29+
may be used to endorse or promote products derived from
30+
this software without specific prior written permission.
31+
32+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
33+
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
34+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
35+
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
36+
HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
37+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
38+
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
39+
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
40+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
41+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
42+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎examples/react/README.md

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
## Nutrient Web SDK Example — React.js
2+
3+
Nutrient Web SDK is a powerful PDF SDK that enables you to view, annotate, sign, and edit PDF documents in your web applications. This repository demonstrates how to seamlessly integrate PSPDFKit with a React application.
4+
5+
## Features
6+
7+
- **View and Annotate PDFs** — Easily view and annotate PDF documents within your web app.
8+
- **Real-Time Collaboration** — Sync document edits, text highlights, and annotations across Android, iOS, and web devices in real time.
9+
- **Electronic and Digital Signatures** — Certified, encrypted, and secure document signing workflows.
10+
- **Forms** — Create, fill, capture, and submit PDF form data.
11+
- **Cross-Platform** — Consistent behavior across different web browsers.
12+
13+
## Prerequisites
14+
15+
- [Node.js][]
16+
17+
## Support and Issues
18+
19+
Are you evaluating our SDK? That’s great, and we’re happy to help! Feel free to contact our [Sales team][sales] to schedule a demo.
20+
21+
## Getting Started
22+
23+
Clone the repository:
24+
25+
```bash
26+
git clone https://github.com/PSPDFKit/pspdfkit-web-example-react.git
27+
cd pspdfkit-web-example-react
28+
```
29+
30+
Install the project dependencies with npm:
31+
32+
```bash
33+
npm install
34+
```
35+
36+
If you need more information, refer to our [Getting Started on Web][getting started] guide.
37+
38+
## Running the Example
39+
40+
Now you’re ready to launch the app! 🎉
41+
42+
Run the app in development mode:
43+
44+
```bash
45+
npm start
46+
```
47+
48+
Create a production build of the app and serve it:
49+
50+
```bash
51+
npm run build
52+
npx serve -s build
53+
```
54+
55+
Enjoy! 🍕
56+
57+
## React Component
58+
59+
The React component that implements the Nutrient Web SDK integration can be found at `src/components/PdfViewerComponent`.
60+
61+
To make the files above available, copy them from the `node_modules/pspdfkit/dist` folder using the script at `scripts/copy-pspdfkit-files`.
62+
63+
## License
64+
65+
This software is licensed under a [modified BSD license](LICENSE).
66+
67+
## FAQ
68+
69+
### How Do I Integrate PSPDFKit with My Existing React App?
70+
71+
Follow [this guide][react existing project] to integrate our Web SDK into your project.
72+
73+
### Where Can I Find More Documentation?
74+
75+
We have extensive documentation with [developer guides for React][react guides] that show you how to add document functionality to React apps.
76+
77+
## Useful Resources
78+
79+
- [How to Convert HTML to PDF Using React][]
80+
- [How to Build a React.js PDF Viewer with react-pdf][]
81+
82+
## Contributing
83+
84+
Please ensure you’ve signed [our CLA][cla] so that we can accept your contributions.
85+
86+
[node.js]: http://nodejs.org/
87+
[sales]: https://www.nutrient.io/sdk/contact-sales
88+
[getting started]: https://www.nutrient.io/getting-started/web/?frontend=react&download=npm&integration=module
89+
[react existing project]: https://www.nutrient.io/getting-started/web/?frontend=react&project=existing-project
90+
[react guides]: https://www.nutrient.io/guides/web/react/
91+
[how to convert html to pdf using react]: https://www.nutrient.io/blog/2022/how-to-convert-html-to-pdf-using-react/
92+
[how to build a react.js pdf viewer with react-pdf]: https://www.nutrient.io/blog/2021/how-to-build-a-reactjs-pdf-viewer-with-react-pdf/
93+
[cla]: https://www.nutrient.io/guides/web/current/miscellaneous/contributing/

0 commit comments

Comments
 (0)