How to view pdf in react js using pdf viewer

hello guys I'm going to show you how to view PDF in react at first let's go to our browser and search for reactpdf.org I'm going to use this package and the first step is to install the package using this command so let me copy it and go back to the project and paste it okay after you install it make sure it has been successfully added to your note modules by checking the package.json all right and let's go to the next step next step is to create a PDF document and we need to actually first of all import whatever has been imported right here let me copy this and let me go to my component which is app.js paste whatever I copied okay and the next thing is the style attribute let me copy this one as well and paste it here all right and the next one um okay this is a function so we need to create a separate component so let me create a component like pdf.js only for this purpose all right and paste the function and also whatever I pasted here let me take this guys the style paste it here on the top and also we need to import uh the needed attributes and functions let me cut this and paste it here okay and the next one is to uh select a renderer so we are going to actually render it inside our HTML so we need this rendering Dom and also we need to take this action inside app.js this time first the import and then the PDF viewer tag let me copy and paste it here all right and then paste the react on render all right and as you can see we are using my document tag so we need to export it inside the PDF component let me add an export default okay and make sure you import whatever you are using okay and that would be pretty much it I guess select a file and as you can see it's successfully uh rendered inside our HTML all right and as you can see zoom in works and also zoom out that's all thanks for watching

Channel: Codeburst

Views: 14,908

Keywords: react pdf viewer, how to upload and view pdf files in react js, how to view pdf files in react, how to upload and view pdf files in react, how to view pdf files in react js, pdf viewer in react js, pdf viewer, react pdf, how to display pdf in react js, how to display pdf in react, react pdf viewer tutorial, how to preview pdf in angular using pdf viewer, generating pdf in react, generate pdf using react, react pdf generator, react to pdf printing, pdf

Id: xz_x-OnpDTA

Length: 2min 54sec (174 seconds)

Published: Tue Sep 05 2023