DISPLAY A PDF FILE IN REACT APPLICATION WITHOUT ANY EXTRA PACKAGE.

INTRODUCTION

Welcome to this tutorial, here your are going to understand how to display PDF in your react application using google Drive service.
We are going to create a simple react application in which we are going to display our PDF file stored in google drive. If you don’t have a google drive account click here to create one.
Once that’s done, you have your google drive account and offcourse basic skills in react, you are able to follow this tutorial.

CREATE REACT APP

You can create a react application and install all the packages by your own, however you can use the npx create-react-app <project name> command line that installs all basics components and packages we need.

GET A PDF FILE FROM GOOGLE DRIVE

If you don’t have a pdf file in your google drive and don’t know how to upload one click here and learn how to upload a file in google drive.

Once our pdf file is uploaded in google drive click on that file to display it, then go to menu and open it in a new window.

In the new window, click again on menu icon , then to embed item.

After that, let's copy this HTML code and past it in app.js file in our react application.

Here we are, let’s write npm start command line to run our application.

CONCLUSION

Now you are able to display a PDF file stored in google drive in react application without any extra package.
Thanks for reading