Creating a PDF Viewer Using React, Vite, and Typescript

In this article, we will be exploring how to create a PDF viewer using React, Vite, and Typescript. PDF viewers are essential for displaying and interacting with PDF documents in web applications. By the end of this tutorial, you will have a fully functional PDF viewer that can display, zoom, and navigate through PDF documents.

Setting up the Project

The first step is to set up a new React project using Vite, a fast build tool for modern web development. To create a new Vite project, run the following command in your terminal:

        npx create-vite@latest my-pdf-viewer --template react-ts
    

This command will create a new directory called my-pdf-viewer and scaffold a new React project with Typescript support.

Installing Dependencies

Next, navigate to the newly created project directory and install the necessary dependencies:

        cd my-pdf-viewer
npm install pdfjs-dist react-pdf types/pdfjs-dist
    

We are using pdfjs-dist to handle PDF parsing and rendering, and react-pdf to create a React component for displaying PDF documents.

Creating the PDF Viewer Component

Now, let’s create a new file called PDFViewer.tsx in the src directory. This will be our PDF viewer component:

        import React, { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import pdfFile from './example.pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

const PDFViewer: React.FC = () => {
  const [numPages, setNumPages] = useState(0);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
    setNumPages(numPages);
  }

  return (
    

      
        
      
      
Page {pageNumber} of {numPages}
    
  );
};

export default PDFViewer;
    

This component uses the Document and Page components from react-pdf to display the PDF document. It also uses state to keep track of the number of pages and the current page number.

Using the PDF Viewer Component

Now that we have created the PDF viewer component, we can use it in our main App.tsx file:

        import React from 'react';
import PDFViewer from './PDFViewer';

const App: React.FC = () => {
  return (
    

      
PDF Viewer
      
    
  );
};

export default App;
    

By importing and using the PDFViewer component, we can now render the PDF viewer in our application.

Running the Application

Finally, to run the application, use the following command:

        npm run dev
    

This will start the development server, and you can navigate to http://localhost:3000 to see your PDF viewer in action!

Conclusion

In this tutorial, we have learned how to create a PDF viewer using React, Vite, and Typescript. We have set up a new project, installed the necessary dependencies, created a PDF viewer component, used it in our application, and run the application to see the PDF viewer in action. You can now further customize the PDF viewer to add features such as zooming, navigation, and annotation. Happy coding!