Today, many web applications provide inbuilt PDF viewing options to their users. However, choosing one isn’t easy since they have far more capabilities than just showing a PDF.

So, in this article, I will evaluate 5 PDF Viewer Libraries for React with feature comparisons to help you choose the best one for your requirement.

1. React-pdf/renderer — Specialized in rendering and creating PDFs.

React-pdf/renderer is a widely used library for creating PDF files on the browser and server.

This library offers some basic components to get things started, and as you get familiar, you can customize them to come up with more eye-catching designs.

• <Document> : This is the root of a PDF file.
• <Page> : Single page is described by this tag. It needs to be of a certain dimension (e.g. A4).
• <View> : A general-purpose container used to style and format PDFs. You can use StyleSheet.create() API to style your views with the full capability of Flexbox and CSS properties to layout PDFs, similarly to how it is used in React Native.
• <Text> : Used to display text.
• <Image> : Can be used to insert images into a PDF document.
• <Link> : Can be used to generate hyperlink annotations.

Also, React-pdf/renderer comes with some amazing features that can be used to generate stunning documents. I can easily list down some of them as follows:

• Support a variety of styles and CSS properties.
• More control over the document through usePDF hook API.
• Provides a Node API.
• Great documentation.
• Fast and efficient.
• Highly customizable & easy to use.

In addition to all these things, React-pdf/renderer library has around 93,000 weekly downloads and more than 9.3k GitHub stars.

You can easily install this library to your project using npm install — save @react-pdf/renderer command and the below code shows a simple example of using React-pdf/renderer.

2. React-pdf — Displays PDFs as if they were images.

React-pdf/renderer, which we discussed earlier, is specialized in creating PDFs. But if you are looking for a library to only display PDFs, React-pdf is the best option.

React-pdf provides a React component API that allows to open PDF files and render them using PDF.js. Although this is a simple library specialized for PDF viewing, it has some amazing features like:

• Easy to use — Insert the Document component and give it a file prop. React-pdf will sort it out whether it’s a URL, a file, or base64.
• Support for custom events.
• Multiple rendering methods.
• Support for text selection and annotations.
• Cross-browser compatibility.
• Accessibility — React-pdf not only renders PDFs as images. But also as visible text layers that screen readers can grasp, making your content more available to the visually impaired.
• Free and open-source.

Apart from all that, Having more than 296,000 weekly downloads and 4.6K GitHub stars shows how popular this library is in the React community.

You can install it using npm i react-pdf command, and the below example shows the basic usage of React-pdf.

3. @phuocng/react-pdf-viewer — Powered by React Hooks.

React-pdf-viewer is a React component entirely powered by React hooks and written in TypeScript.

Despite being new, React-pdf-viewer has some exciting features to make you fall for it. For better understanding, I will list them down as below:

• Support password-protected documents.
• Zoom: Support custom levels such as actual size, page fit, and page width.
• Navigation between pages.
• Search for text.
• Preview page thumbnails.
• View and navigate the table of contents.
• List and download attachments.
• Rotating and many scrolling modes.
• Text selection and hand tool modes.
• Full-screen mode.
• Can open local files (e.g., drag and drop a local file to view it.)
• Download file and Print.
• View the document properties.
• Support SSR.

Also, it is fully customizable with its collection of plugins and aid users with great documentation.

It;s only been a year since it is first released and it already has more than 2000 weekly downloads and 519 GitHub stars.

Note: You need to have React 16.8+ version and TypeScript 3.8+ version to use React-pdf-viewer.

You can install it using npm i @phuocng/react-pdf-viewer command, and the below example shows the basic usage of React-pdf-viewer.

4. React-file-viewer- Supports many file formats.

The React-file-viewer is a extendable file viewer for web applications which supports PDFs, images, csv, xslx, and docx.

This library provides a component named FileViewer which is used to display the content, and it accepts several props:

• fileType String: Resource type to display. If you use an unsupported file type, an unsupported file type notice will appear.
• filePath String: URL of the resource that the FileViewer will display.
• onError Function [optional]: This function will be invoked if the file viewer fails to fetch or render the requested resource. This is where you can specify a logging utility callback.
• errorComponent react element [optional]: A component to render in the event of an error rather than react-file-viewer default error component.
• unsupported Component react element [Optional]: A component to render if the file format isn’t supported.

Apart from that, it has some special features like:

• Testability with Jest or Enzyme.
• Time-saving by using the running the linter with make lint to discover mistakes before we run our code.
• Extendable- Adding supported file types is easy.

Also, this is among the most popular pdf viewer libraries with 17,348 weekly downloads and 291 GitHub Stars.

Note: This library well functions with React 16+. If you’re using React< 16 version, you’ll most likely require React-file-viewer version 0.5 installed.

React-file-viewer can be installed with npm i react-file-viewer command and the below example shows a simple example of React-file-viewer.

5. @mikecousins/react-pdf

@mikecousins/react-pdf is a component that uses PDF.js to render PDF documents.

This library uses a Hook called usePdf to render PDFs, and we need to pass several props with this Hook:

• file -URL of the PDF file.
• page - Denotes the page that you want to display. Default = 1.
• scale- Allows you to scale the PDF. Default = 1.
• onDocumentLoadSuccess -You can define a callback function that will be invoked after the PDF document data has been fully loaded.
• onDocumentLoadFail- Let you define a callback that is invoked when a PDF document data loading error occurs.
• onPageLoadSuccess -Let you define a callback that will be invoked after the PDF page data has finished loading.
• onPageRenderSuccess -Let you define a callback that will be executed after the PDF page has been entirely rendered into the DOM.

If you think this is too much work; you can simply use the Pdfcomponent directly, which utilizes the usePdf hook internally.

The npm package @mikecousins/react-pdf-js has weekly 2,646 downloads with 497 GitHub stars.

You can simply install @mikecousins/react-pdf with yarn add @mikecousins/react-pdf or npm install @mikecousins/react-pdf.

Final thoughts

After analyzing the features, popularity, security issues, and community support, I would say the best option for a pdf viewer library is React-pdf.

Considering the pattern of released versions, the repository activities, and other relevant data, the maintenance status of React-pdf stands well ahead of all other libraries.

However, the library selection can be changed based on your requirements. I think this article would surely help you understand more about these libraries.

Thank you for reading…!!!

Develop & share independent components with Bit

Bit is an ultra-extensible tool that lets you create truly modular applicationswith independently authored, versioned, and maintained components.

Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.