Display PDF as an Image in React JS with React-PDF | PDF Viewer

hey everyone in this video we will view PDF as an images okay a whole PDF passed in images just by going previous and next to next pages and for this purpose we will use a package by the name of react PDF this package so to install this and just simply write npm install react PDF so after installing this so let's now use it okay I have already created my react app and I will write my code in this file and I imported this in index.js file so now let's write now we will import the react vdf we will import the document and page from react PDF [Music] slash esm and slash let's come to the webpack entry that we pack from this page and now let's write our function okay PDF as image so first of all I will create two button I will just simply write here class name Flex [Music] and line items Center justify content it is bootstrap class bootstrap classes so here I will create two buttons for previous and next uh I will just write that down okay leave it now here so first I will write the documents to read the document for that first I will import a file PDF file import file from [Music] I have this file in the same directory the ACT icons and now I will use this so to to view this first I will use the document and the a property by the name of file PDF file after writing this so now we will display the pages let's just display the page whenever it's loaded so by loading we will just take the all pages from this on load success we will just call a function and document [Music] success we will create this function in this function what we will do we will just take all pages the number of pages okay first I will create a state number of pages set number of pages is equal to use straight hook by default null and also one another state for page number [Music] foreign [Music] by default that is the first phase that we should read so now let's create that function and comment document success here we will get a number of pages and we will set number of pages to num a pages okay we will update this number of pages through this property okay prop so now let's read now the page and here I will assign page number which number would be page number that we have okay this page number so now first we will read the first page of this PDF then we will add two buttons for next and previous npm start the project will start so where's the problem imported as PDF as image was not found so let's add to the index page of we didn't export it but loading pdfc the first page has displayed to us okay so now let's add um two buttons at the bottom so what I have did I added just these two icons okay let's stick it these two icons I have added on the top okay by clicking this one we should go to the next page and by this you should go to the previous page so now let's add these events first I will document it so let's by clicking this on click event we will go previous we will go previously our previous page so let's create this function S free previous page is equal to [Music] so here we will sit the page number Okay so today page number if the page number was page number was uh less than or equal to with 1 so then we should put it as page number as 1 okay otherwise page number minus 1. and let's add and click event for this second one also next page so let's const next page couldn't do suit page number and page number if the page number was greater than or equal to with the num pages with the last page so the net will sit as page number otherwise page number plus one let's adjust to 1 here minus 1 was listening and it put plus one was regulator are equal together so now let's check it let's come here press this see we came to the second page third page fourth page also the seventh High come back we came to the bar previous okay the first page back so it was all about displaying the PDF as an image and react is using the app react PDF package so if you have liked this video please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 15,898

Keywords: pdf as image in react, pdf as image, react pdf viewer, pdf viewer in react js, how to upload and view pdf files in react, display pdf in react, how to upload and view pdf files in react js, display pdf in react app, how to display pdf in react, display pdf in react native, how to display pdf in react js, accept only image in react js, how to upload image in react js, profile image upload in react js, image upload in react js, how to view pdf files in react

Id: g9CmMOJOjrc

Length: 8min 15sec (495 seconds)

Published: Sat Feb 11 2023