How to display a PDF in React

In this post, you’ll learn how to display a PDF in a React app using Vite and Nutrient. Vite(opens in a new tab) 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(opens in a new tab): Make sure you have the latest stable version installed. You can get it from the official Node.js website(opens in a new tab).
• Package manager: You can use either npm(opens in a new tab) or Yarn(opens in a new tab). 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 nutrient-react-example --template react

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

2. Navigate to your project directory:

cd nutrient-react-example

Adding Nutrient to your project

1. First, install Nutrient as a dependency:

npm i @nutrient-sdk/viewer

pnpm add @nutrient-sdk/viewer

yarn add @nutrient-sdk/viewer

2. The Nutrient Web SDK loads its WebAssembly and supporting files from a local path, so you need to copy them to the public folder. Start by installing the required copy plugin:

npm install -D rollup-plugin-copy

Then, update your Vite configuration (vite.config.ts) to copy the SDK’s asset files during build:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import copy from 'rollup-plugin-copy';

export default defineConfig({
  plugins: [
    copy({
      targets: [
        {
          src:
            'node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib',
          dest: 'public/',
        },
      ],
      hook: 'buildStart',
    }),
    react(),
  ],
});

Displaying a PDF in your React app

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

2. Now that everything is set up, you’ll render a PDF using the Nutrient SDK.

Basic usage in App.tsx:

import { useEffect, useRef } from 'react';

function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    let cleanup = () => {};

    (async () => {
      const NutrientViewer = (await import('@nutrient-sdk/viewer'))
        .default;

      // Unload any previous instance.
      NutrientViewer.unload(container);

      if (container && NutrientViewer) {
        NutrientViewer.load({
          container,
          document:
            'https://www.nutrient.io/downloads/pspdfkit-web-demo.pdf',
          baseUrl: `${window.location.protocol}//${
            window.location.host
          }/${import.meta.env.PUBLIC_URL ?? ''}`,
        });
      }

      cleanup = () => {
        NutrientViewer.unload(container);
      };
    })();

    return cleanup;
  }, []);

  return (
    <div
      ref={containerRef}
      style={{ height: '100vh', width: '100vw' }}
    />
  );
}

export default App;

3. 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