This article was first published in December 2022 and was updated in August 2024.
In this post, you’ll learn how to display a PDF in a React app using Vite and PSPDFKit. Vite is a modern build tool that provides a faster and leaner development experience for modern web projects, and PSPDFKit is a powerful library that allows you to view, annotate, and manipulate PDFs directly in the browser.
Benefits of Using Vite with PSPDFKit
Utilizing Vite with PSPDFKit offers several advantages:
Faster development — Vite’s instant server start and Hot Module Replacement (HMR) provide immediate feedback, speeding up the development and testing of PSPDFKit features.
Optimized performance — Vite’s efficient bundling and modern JavaScript output ensure quicker load times and smoother operation for applications integrating PSPDFKit.
Seamless integration — With native support for TypeScript and WebAssembly, Vite simplifies the integration of PSPDFKit’s SDKs, enhancing scalability and client-side security.
PSPDFKit React.js PDF Library
We offer a commercial React.js PDF library that’s easy to integrate. It comes with 30+ features that allow your users to view, annotate, edit, and sign documents directly in the browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case.
- A prebuilt and polished UI
- 15+ annotation tools
- Support for multiple file types
- Dedicated support from engineers
PSPDFKit has developer-friendly documentation and offers a beautiful UI for users to work with PDF files easily. Web applications such as Autodesk, Disney, UBS, Dropbox, IBM, and Lufthansa use the PSPDFKit library to manipulate PDF documents.
Requirements
Node.js: Make sure you have the latest stable version installed. You can get it from the official Node.js website.
Package Manager: You can use either npm or Yarn. This guide will include commands for both.
No additional setup is required to use npm, as it’s included with your Node.js installation.
Note: PSPDFKit does not collect any data during your evaluation. You can start without a trial license, but there will be a watermark on the documents. To remove this limitation, you can get a trial key.
Setting Up a New React Project with Vite
To get started, create a new React project using Vite:
# Using Yarnyarn create vite pspdfkit-react-example --template react# Using npmnpm create vite@latest pspdfkit-react-example -- --template react
Navigate to your project directory:
cd pspdfkit-react-example
Adding PSPDFKit to Your Project
First, install PSPDFKit as a dependency:
# Using Yarnyarn add pspdfkit# Using npmnpm install pspdfkit
Next, copy the PSPDFKit Web library assets to the public directory:
cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
This ensures PSPDFKit can access its assets from the public/pspdfkit-lib directory.
Make sure your development server supports the
application/wasmMIME type. This can be crucial for WebAssembly to function correctly.
Displaying a PDF in Your React App
Rename your PDF document to
document.pdfand place it in the public directory.Create a new component to handle PDF rendering. In the
src/components/directory, create a file namedPdfViewerComponent.jsxwith the following content:
import { useEffect, useRef } from 'react';export default function PdfViewerComponent(props) {const containerRef = useRef(null);useEffect(() => {const container = containerRef.current;let PSPDFKit, instance;(async function () {PSPDFKit = await import('pspdfkit');PSPDFKit.unload(container);instance = await PSPDFKit.load({container,document: props.document,baseUrl: `${window.location.protocol}//${window.location.host}/${import.meta.env.BASE_URL}`,});})();return () => PSPDFKit && PSPDFKit.unload(container);}, []);return (<divref={containerRef}style={{ width: '100%', height: '100vh' }}/>);}
Integrate this component into your app by updating the
src/App.jsxfile:
import PdfViewerComponent from './components/PdfViewerComponent';function App() {return (<div className="App" style={{ width: '100vw' }}><div className="PDF-viewer"><PdfViewerComponent document={'document.pdf'} /></div></div>);}export default App;
Ensure your project structure looks like this:
pspdfkit-react-example/├── public/│ ├── pspdfkit-lib/│ └── document.pdf├── src/│ ├── components/│ │ └── PdfViewerComponent.jsx│ └── App.jsx├── package.json└── yarn.lock
Start your development server:
# Using Yarnyarn dev# Using npmnpm run dev
Once the server is running, you can view and interact with your PDF directly in the browser.
Try PSPDFKit for yourself and explore its extensive features for your next project!
Displaying a PDF in React from Any Source
PSPDFKit’s web library can open PDFs from various input sources, including:
Remote URLs
Blobs
Array buffers
Local storage
Base64 data
Conclusion
In this post, you learned how to display a PDF in React using PSPDFKit’s Web library. You successfully set up a React project using Vite and displayed a PDF using PSPDFKit. This setup provides a fast, efficient, and serverless solution for rendering PDFs in your web application. If you encounter any issues or need further assistance, feel free to reach out to our Support team.
At PSPDFKit, we offer a commercial, feature-rich, and completely customizable web PDF library that’s easy to integrate and comes with well-documented APIs to handle advanced use cases. Try it for free, or visit our demo to see it in action.
FAQ
Here are a few frequently asked questions about displaying PDFs in React.
What is PSPDFKit for React?
PSPDFKit for React is a commercial library that allows developers to display and interact with PDF documents in React applications. It comes with a prebuilt UI and supports various features like viewing, annotating, editing, and signing documents.
How do I display a PDF in React using PSPDFKit?
To display a PDF in React using PSPDFKit, you need to:
Install the PSPDFKit library via npm or yarn.
Copy the necessary PSPDFKit assets to the public directory.
Create a component to load and display the PDF document using PSPDFKit’s API.
What are the benefits of using PSPDFKit in a React application?
PSPDFKit offers a polished, ready-to-use UI with more than 30 features, including annotation tools and support for multiple file types. It also provides robust documentation and dedicated support, making it easy to integrate and use in web applications.
Can I customize the PSPDFKit UI in my React project?
Yes, PSPDFKit’s UI is highly customizable. You can extend or simplify the UI according to your use case, adding custom toolbars, buttons, and other elements.
What types of input sources can PSPDFKit handle in a React application?
PSPDFKit can handle various input sources for PDFs, including remote URLs, blobs, array buffers, local storage, and base64 data.
