How to display a PDF file in React.js

I had to create a document viewer for the first time in my internship program. The technology used for the project is MERN stack and the viewer should be able to display different types of files such as jpg, jpeg, tiff and pdf. Displaying files like jpg and jpeg is not difficult and the biggest challenge I had was displaying tiff files and PDF files.

So, I am going to explain step by step how to successfully display PDF files using react.js.

Install react-pdf package

First, you need to install react-pdf package to your react app.

Import the package

Second, you need to import the package

Declare a variable

Then, you need to declare a variable and a setter to get the number of pages in the PDF file.

Display the PDF file

Finally, you need to display the pdf file as shown below. You can use an array to display the pdf file using a scroller.

You can see the full file below.

That’s it for displaying PDF files. I hope to explain about displaying TIFF files in my next story.