How to view pdfs using React Pdf Viewer

Published: 01 January 1970
on channel: JS Solutions
36,169
302

If you find this video outdated then watch this updated version

   • How to display PDF Files using React ...  

Greetings....in this video I will tell you how you can view your pdf files in your react application using a popular component named React Pdf Viewer.


Install these package


1- install pdfjs library | npm install [email protected]
2- install the core package | npm install @react-pdf-viewer/[email protected]
3- install pdf viewer default layout | npm install @react-pdf-viewer/default-layout


All the required imports for React Pdf Viewer Component from the packages

// Import the main component
import { Viewer } from '@react-pdf-viewer/core'; // install this library
// Plugins
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; // install this library
// Import the styles
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
// Worker
import { Worker } from '@react-pdf-viewer/core'; // install this library


Create new plugin instance

const defaultLayoutPluginInstance = defaultLayoutPlugin();

Watch this video: (How to upload and view pdf files in reactjs)
Link:    • How to upload and view pdf files in r...  

The above project github link:
https://github.com/HamzaAnwar1998/Upl...

Buy me a coffee: https://www.buymeacoffee.com/anwarhamzat

If you want to learn about React and Local Storage CRUD with a todo app then this playlist might be for you

   • TodoApp using React Hooks and Local S...  

Follow me on Instagram:   / humzaanwar74  


Watch video How to view pdfs using React Pdf Viewer online without registration, duration hours minute second in high quality. This video was added by user JS Solutions 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 36,16 once and liked it 30 people.