How to display a PDF in React

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 Nutrient. Vite is a modern build tool that provides a faster and leaner development experience for modern web projects, and Nutrient is a powerful library that allows you to view, annotate, and manipulate PDFs directly in the browser.

Benefits of using Vite with Nutrient

Utilizing Vite with Nutrient 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 Nutrient features.

• Optimized performance — Vite’s efficient bundling and modern JavaScript output ensure quicker load times and smoother operation for applications integrating Nutrient.

• Seamless integration — With native support for TypeScript and WebAssembly, Vite simplifies the integration of Nutrient’s SDKs, enhancing scalability and client-side security.

Nutrient 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

Nutrient 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 Nutrient 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: Nutrient 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

1. To get started, create a new React project using Vite:

# Using Yarn
yarn create vite pspdfkit-react-example --template react

# Using npm
npm create vite@latest pspdfkit-react-example -- --template react

2. Navigate to your project directory:

cd pspdfkit-react-example

Adding Nutrient to your project

1. First, install Nutrient as a dependency:

# Using Yarn
yarn add pspdfkit

# Using npm
npm install pspdfkit

2. Next, copy the Nutrient Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib

This ensures Nutrient can access its assets from the public/pspdfkit-lib directory.

Make sure your development server supports the application/wasm MIME type. This can be crucial for WebAssembly to function correctly.

Displaying a PDF in your React app

1. Rename your PDF document to document.pdf and place it in the public directory.

2. Create a new component to handle PDF rendering. In the src/components/ directory, create a file named PdfViewerComponent.jsx with 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 (
		<div
			ref={containerRef}
			style={{ width: '100%', height: '100vh' }}
		/>
	);
}

3. Integrate this component into your app by updating the src/App.jsx file:

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

4. Start your development server:

# Using Yarn
yarn dev

# Using npm
npm run dev

Once the server is running, you can view and interact with your PDF directly in the browser.

Try Nutrient for yourself and explore its extensive features for your next project!

Displaying a PDF in React from any source

Nutrient’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 [Nutrient’s Web library][nutrient]. You successfully set up a React project using Vite and displayed a PDF using [Nutrient][]. 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 Nutrient, 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 Nutrient React SDK?

Nutrient React SDK 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 Nutrient?

To display a PDF in React using Nutrient, you need to:

1. Install the Nutrient library via npm or yarn.

2. Copy the necessary Nutrient assets to the public directory.

3. Create a component to load and display the PDF document using Nutrient’s API.

What are the benefits of using Nutrient in a React application?

Nutrient 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 Nutrient UI in my React project?

Yes, Nutrient’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 Nutrient handle in a React application?

Nutrient can handle various input sources for PDFs, including remote URLs, blobs, array buffers, local storage, and base64 data.