1. Products
  2.   PDF
  3.   JavaScript
  4.   React-PDF
 
  

Display PDF Files in Your React App Without an Issue Through React-PDF

React-PDF allows you to display PDF files as if they were images in a React app without any hassle or using multiple plugins.

There are many times developers need to add PDFs to React applications, and while it can be hard getting the resolution, sizing or layout right, the React-PDF lets you add PDFs to a React application just like images. Its free to download, open source, and a complete package. React PDF was developed using JavaScript and CSS and is completely compatible for any React application.

There are many versions of React-PDF currently available, with the latest being React-PDF v5. The other versions continually get bug fixes and updates as well, however, using React-PDF v5 will give optimal results.

In order to use React-PDF make sure that your React application is using the latest version of React i.e. React 16.3 or later. In case, you’re using older versions of React, then you will have to use the older versions of the React-PDF.

Previous Next

Getting Started with React-PDF

The recommend and easiest way to get started is to install via npm, below is the command.

Install React-PDF via npm

npm install react-pdf

You can also install it manually; download the latest release files directly from GitHub repository.

Non-Latin Characters Rendering in Free JavaSrcipt API

The open source React-PDF library enables software developers to programmatically render non-latin characters inside their own application using JavaScript commands. React-PDF has non-Latin character support as well, and if you want to make sure that any non-Latin characters are rendered properly when a PDF is displayed in a project, you can get it done with cMaps copied from pdfjs-dist.

Load Single or Multiple PDF Pages using Free JavaScript API

The Document tag allows you to load a PDF doc that is passed through the File prop. With this tag you can either load a single or multiple pages, or add navigation as well. You can also highlight text on a page, show table of contents in an interactive way, and provide external links as well.

How to Display Single PDF Page via JavaScript API

import React from 'react';
import { Document, Page } from 'react-pdf';

import samplePDF from './test.pdf';

export default function Test() {
  return (
    
      
    
  );
}

Manage Annotations in PDF Documents via JavaScript

The open source JavaScript library React-PDF gives software programmers the capability to programmatically manage various types of annotations inside their PDF documents. Please remember that user’s needs to include style-sheet necessary for annotations to be correctly displayed. It allows users to Highlight, text, ink, note, shapes and more with ease.

How to Handle External Links in PDFs via JavaScript

import React, { useState } from 'react';
import { Document, Outline, Page } from 'react-pdf';

import samplePDF from './test.pdf';

export default function Test() {
  const [pageNumber, setPageNumber] = useState(1);

  function onItemClick({ pageNumber: itemPageNumber }) {
    setPageNumber(itemPageNumber);
  }

  return (
    
      
    
  );
}
 English