Create Custom PDF Viewer using React PDF & React Hooks

[Music] hello everyone this is tuba mizan welcome to recording all the code used inside this video are mentioned inside the description box so if you like the work we are doing and if you're learning something from our videos please do subscribe to our channel and share it with your group because your subscription will make this type of video happen in the future so without any further ado let's get started in this video we are going to learn about how to create pdf viewer inside react using react pdf package first we create react app using npx create react app command inside terminal then install another package as npm install react pdf now let's start our react server using npm start command then inside our app.js file we remove the boilerplate codes then import react and use state from react library then import document and page from react pdf library inside the react pdf library path we need to add the configuration of web page file so that when we preview our pdf it will render easily now let's create some variable using react hooks first variable as number page and set its value to null variable as page number which will default set to page number one then create a function which will load when we render the pdf inside the react view called as on document load success it will take the parameter as number of pages inside the function we set the number pages to our input page number then set the page number as page first first we copy a sample pdf file then paste it inside the source folder of react app then inside the header tag add document tag inside it add file attribute and add pdf file path then add on load success to document load success then inside the document add page tag add height of page stack to 600 pixel then add page number to our state page number here inside the react tab we can see that the document has started showing pdf file for showing the current page number add a p tag then inside it show page number and number of pages variable here we can see the page numbers for creating the button for changing the page forward and backward then create a conditional block and check if the page number is greater than 1 then show the back button create button tag add on click attribute and add function change page previous for changing page create a function called change page which takes offset as parameter then inside the function set page number to previous page number and add the offset into it then create a change page back function and add change page function add negative one which will change page backward then create another function for page forward and change page to positive one for creating forward button add another conditional block to check if page number is greater than number of pages and if so then show button for page forward and add function for on click attribute here we can see that we can easily change page using forward and back button to show that all the pages of the pdf inside single scroll view first we comment out a previous code then create a center tag inside it add div inside it then create another document tag along with file path and onload function then inside it we are going to show a block of code when rendering the page inside it we use an array from function then create a new array which holds all the pages of pdf inside it then we get two parameter from it element and next then inside the return of it we create a page tag add the attribute of key and page number passing the index and increment it by 1. so here we can see that we are able to render all the page inside the single file and this is how we can use react pdf package to render page multiple pages inside react app i really hope that you all like this video do let us know in the comment section box but how you would love to use this feature inside your next project and yes let us know what you liked or disliked about this video in the comment section please do like and subscribe to our channel and yes do not forget to suggest some more topics for now i'll be signing off we'll definitely see you all in the next video

Channel: Recoding

Views: 67,995

Keywords: react js, react pdf viewer

Id: GtGmqVyBNVg

Length: 7min 26sec (446 seconds)

Published: Fri Dec 17 2021