Display PDFs in your React app as easily as if they were images.

Last update: Jun 21, 2022

npm downloads CI dependencies dev dependencies tested with jest

React-PDF

Display PDFs in your React app as easily as if they were images.

Lost?

This package is used to display existing PDFs. If you wish to create PDFs using React, you may be looking for @react-pdf/renderer.

tl;dr

  • Install by executing npm install react-pdf or yarn add react-pdf.
  • Import by adding import { Document } from 'react-pdf'.
  • Use by adding <Document file="..." />. file can be a URL, base64 content, Uint8Array, and more.
  • Put <Page /> components inside <Document /> to render pages.

Demo

A minimal demo page can be found in sample directory.

Online demo is also available!

Before you continue

React-PDF is under constant development. This documentation is written for React-PDF 5.x branch. If you want to see documentation for other versions of React-PDF, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:

Getting started

Compatibility

React

To use the latest version of React-PDF, your project needs to use React 16.3 or later.

If you use an older version of React, please refer to the table below to a find suitable React-PDF version. Don't worry - as long as you're running React 15.5 or later, you won't be missing out a lot!

React version Newest compatible React-PDF version
≥16.3 latest
≥15.5 4.x

Internet Explorer

Internet Explorer is not supported in React-PDF 5.x or later. If you need Internet Explorer support, you will need to use React-PDF 4.x instead. Don't worry - it still receives bug fixes and even occasional small features!

Installation

Add React-PDF to your project by executing npm install react-pdf or yarn add react-pdf.

Usage

Here's an example of basic usage:

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

function MyApp() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file="somefile.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}

Check the sample directory in this repository for a full working example. For more examples and more advanced use cases, check Recipes in React-PDF Wiki.

Enable PDF.js worker

It is crucial for performance to use PDF.js worker whenever possible. This ensures that PDF files will be rendered in a separate thread without affecting page performance. To make things a little easier, we've prepared several entry points you can use.

Webpack

Instead of directly importing/requiring 'react-pdf', import it like so:

// using ES6 modules
import { Document } from 'react-pdf/dist/esm/entry.webpack';

// using CommonJS modules
import { Document } from 'react-pdf/dist/umd/entry.webpack';

Parcel

Instead of directly importing/requiring 'react-pdf', import it like so:

// using ES6 modules
import { Document } from 'react-pdf/dist/esm/entry.parcel';

// using CommonJS modules
import { Document } from 'react-pdf/dist/umd/entry.parcel';

Create React App

Create React App uses Webpack under the hood, but instructions for Webpack will not work. Standard instructions apply.

Standard (Browserify and others)

If you use Browserify or other bundling tools, you will have to make sure on your own that pdf.worker.js file from pdfjs-dist/build is copied to your project's output folder.

Alternatively, you could use the minified pdf.worker.min.js from an external CDN:

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

Support for annotations

If you want to use annotations (e.g. links) in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for annotations to be correctly displayed like so:

// using ES6 modules
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

// using CommonJS modules
import 'react-pdf/dist/umd/Page/AnnotationLayer.css';

Support for non-latin characters

If you want to ensure that PDFs with non-latin characters will render perfectly, or you have encountered the following warning:

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

then you would also need to include cMaps in your build and tell React-PDF where they are.

Copying cMaps

First, you need to copy cMaps from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed). cMaps are located in pdfjs-dist/cmaps.

Webpack

Add copy-webpack-plugin to your project if you haven't already:

npm install copy-webpack-plugin --save-dev

Now, in your Webpack config, import the plugin:

import CopyWebpackPlugin from 'copy-webpack-plugin';

and in plugins section of your config, add the following:

new CopyWebpackPlugin([
  {
    from: 'node_modules/pdfjs-dist/cmaps/',
    to: 'cmaps/'
  },
]),
Parcel, Browserify and others

If you use Parcel, Browserify or other bundling tools, you will have to make sure on your own that cMaps are copied to your project's output folder.

Setting up React-PDF

Now that you have cMaps in your build, pass required options to Document component by using options prop, like so:

<Document
  options={{
    cMapUrl: 'cmaps/',
    cMapPacked: true,
  }}
/>

Alternatively, you could use cMaps from external CDN:

import { pdfjs } from 'react-pdf';

<Document
  options={{
    cMapUrl: `//cdn.jsdelivr.net/npm/[email protected]${pdfjs.version}/cmaps/`,
    cMapPacked: true,
  }}
/>

User guide

Document

Loads a document passed using file prop.

Props

Prop name Description Default value Example values
className Class name(s) that will be added to rendered element along with the default react-pdf__Document. n/a
  • String:
    "custom-class-name-1 custom-class-name-2"
  • Array of strings:
    ["custom-class-name-1", "custom-class-name-2"]
error What the component should display in case of an error. "Failed to load PDF file."
  • String:
    "An error occurred!"
  • React element:
    <div>An error occurred!</div>
  • Function:
    this.renderError
externalLinkTarget Link target for external links rendered in annotations. unset, which means that default behavior will be used One of valid values for target attribute.
  • "_self"
  • "_blank"
  • "_parent"
  • "_top"
file What PDF should be displayed.
Its value can be an URL, a file (imported using import ... from ... or from file input form element), or an object with parameters (url - URL; data - data, preferably Uint8Array; range - PDFDataRangeTransport; httpHeaders - custom request headers, e.g. for authorization), withCredentials - a boolean to indicate whether or not to include cookies in the request (defaults to false).
Warning: Since equality check (===) is used to determine if file object has changed, it must be memoized by setting it in component's state, useMemo or other similar technique.
n/a
  • URL:
    "http://example.com/sample.pdf"
  • File:
    import sample from '../static/sample.pdf' and then
    sample
  • Parameter object:
    { url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }, withCredentials: true }
imageResourcesPath The path used to prefix the src attributes of annotation SVGs. n/a (pdf.js will fallback to an empty string) "/public/images/"
inputRef A prop that behaves like ref, but it's passed to main <div> rendered by <Document> component. n/a
  • Function:
    (ref) => { this.myDocument = ref; }
  • Ref created using React.createRef:
    this.ref = React.createRef();

    inputRef={this.ref}
  • Ref created using React.useRef:
    const ref = React.useRef();

    inputRef={ref}
loading What the component should display while loading. "Loading PDF…"
  • String:
    "Please wait!"
  • React element:
    <div>Please wait!</div>
  • Function:
    this.renderLoader
noData What the component should display in case of no data. "No PDF file specified."
  • String:
    "Please select a file."
  • React element:
    <div>Please select a file.</div>
  • Function:
    this.renderNoData
onItemClick Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. n/a ({ pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
onLoadError Function called in case of an error while loading a document. n/a (error) => alert('Error while loading document! ' + error.message)
onLoadSuccess Function called when the document is successfully loaded. n/a (pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')
onPassword Function called when a password-protected PDF is loaded. A function that prompts the user for password (callback) => callback('s3cr3t_p4ssw0rd')
onSourceError Function called in case of an error while retrieving document source from file prop. n/a (error) => alert('Error while retrieving document source! ' + error.message)
onSourceSuccess Function called when document source is successfully retrieved from file prop. n/a () => alert('Document source retrieved!')
options An object in which additional parameters to be passed to PDF.js can be defined. For a full list of possible parameters, check PDF.js documentation on DocumentInitParameters. n/a { cMapUrl: 'cmaps/', cMapPacked: true }
renderMode Rendering mode of the document. Can be "canvas", "svg" or "none". "canvas" "svg"
rotate Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given rotate prop of their own. 90 = rotated to the right, 180 = upside down, 270 = rotated to the left. n/a 90

Page

Displays a page. Should be placed inside <Document />. Alternatively, it can have pdf prop passed, which can be obtained from <Document />'s onLoadSuccess callback function, however some advanced functions like linking between pages inside a document may not be working correctly.

Props

Prop name Description Default value Example values
canvasRef A prop that behaves like ref, but it's passed to <canvas> rendered by <PageCanvas> component. If you set renderMode to "svg" this prop will be ignored. n/a
  • Function:
    (ref) => { this.myPage = ref; }
  • Ref created using React.createRef:
    this.ref = React.createRef();

    inputRef={this.ref}
  • Ref created using React.useRef:
    const ref = React.useRef();

    inputRef={ref}
className Class name(s) that will be added to rendered element along with the default react-pdf__Page. n/a
  • String:
    "custom-class-name-1 custom-class-name-2"
  • Array of strings:
    ["custom-class-name-1", "custom-class-name-2"]
customTextRenderer A function that customizes how a text layer is rendered. Passes itext item and index for item. n/a ({ str, itemIndex }) => { return (<mark>{str}</mark>) }
error What the component should display in case of an error. "Failed to load the page."
  • String:
    "An error occurred!"
  • React element:
    <div>An error occurred!</div>
  • Function:
    this.renderError
height Page height. If neither height nor width are defined, page will be rendered at the size defined in PDF. If you define width and height at the same time, height will be ignored. If you define height and scale at the same time, the height will be multiplied by a given factor. Page's default height 300
imageResourcesPath The path used to prefix the src attributes of annotation SVGs. n/a (pdf.js will fallback to an empty string) "/public/images/"
inputRef A prop that behaves like ref, but it's passed to main <div> rendered by <Page> component. n/a
  • Function:
    (ref) => { this.myPage = ref; }
  • Ref created using React.createRef:
    this.ref = React.createRef();

    inputRef={this.ref}
  • Ref created using React.useRef:
    const ref = React.useRef();

    inputRef={ref}
loading What the component should display while loading. "Loading page…"
  • String:
    "Please wait!"
  • React element:
    <div>Please wait!</div>
  • Function:
    this.renderLoader
noData What the component should display in case of no data. "No page specified."
  • String:
    "Please select a page."
  • React element:
    <div>Please select a page.</div>
  • Function:
    this.renderNoData
onLoadError Function called in case of an error while loading the page. n/a (error) => alert('Error while loading page! ' + error.message)
onLoadProgress Function called, potentially multiple times, as the loading progresses. n/a ({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%');
onLoadSuccess Function called when the page is successfully loaded. n/a (page) => alert('Now displaying a page number ' + page.pageNumber + '!')
onRenderError Function called in case of an error while rendering the page. n/a (error) => alert('Error while loading page! ' + error.message)
onRenderSuccess Function called when the page is successfully rendered on the screen. n/a () => alert('Rendered the page!')
onGetAnnotationsSuccess Function called when annotations are successfully loaded. n/a (annotations) => alert('Now displaying ' + annotations.length + ' annotations!')
onGetAnnotationsError Function called in case of an error while loading annotations. n/a (error) => alert('Error while loading annotations! ' + error.message)
onGetTextSuccess Function called when text layer items are successfully loaded. n/a (items) => alert('Now displaying ' + items.length + ' text layer items!')
onGetTextError Function called in case of an error while loading text layer items. n/a (error) => alert('Error while loading text layer items! ' + error.message)
pageIndex Which page from PDF file should be displayed, by page index. 0 1
pageNumber Which page from PDF file should be displayed, by page number. If provided, pageIndex prop will be ignored. 1 2
renderAnnotationLayer Whether annotations (e.g. links) should be rendered. true false
renderInteractiveForms Whether interactive forms should be rendered. renderAnnotationLayer prop must be set to true. false true
renderMode Rendering mode of the document. Can be "canvas", "svg" or "none". "canvas" "svg"
renderTextLayer Whether a text layer should be rendered. true false
rotate Rotation of the page in degrees. 90 = rotated to the right, 180 = upside down, 270 = rotated to the left. Page's default setting, usually 0 90
scale Page scale. 1.0 0.5
width Page width. If neither height nor width are defined, page will be rendered at the size defined in PDF. If you define width and height at the same time, height will be ignored. If you define width and scale at the same time, the width will be multiplied by a given factor. Page's default width 300

Outline

Displays an outline (table of contents). Should be placed inside <Document />. Alternatively, it can have pdf prop passed, which can be obtained from <Document />'s onLoadSuccess callback function.

Props

Prop name Description Default value Example values
className Class name(s) that will be added to rendered element along with the default react-pdf__Outline. n/a
  • String:
    "custom-class-name-1 custom-class-name-2"
  • Array of strings:
    ["custom-class-name-1", "custom-class-name-2"]
inputRef A prop that behaves like ref, but it's passed to main <div> rendered by <Outline> component. n/a
  • Function:
    (ref) => { this.myOutline = ref; }
  • Ref created using React.createRef:
    this.ref = React.createRef();

    inputRef={this.ref}
  • Ref created using React.useRef:
    const ref = React.useRef();

    inputRef={ref}
onItemClick Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. n/a ({ pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
onLoadError Function called in case of an error while retrieving the outline. n/a (error) => alert('Error while retrieving the outline! ' + error.message)
onLoadSuccess Function called when the outline is successfully retrieved. n/a (outline) => alert('The outline has been successfully retrieved.')

Useful links

License

The MIT License.

Author

Wojciech Maj
[email protected]
http://wojtekmaj.pl

Thank you

This project wouldn't be possible without awesome work of Niklas Närhinen [email protected] who created its initial version and without Mozilla, author of pdf.js. Thank you!

Sponsors

Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.

Backers

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Top Contributors

Thank you to all our contributors that helped on this project!

Top Contributors

GitHub

https://github.com/wojtekmaj/react-pdf
Comments
  • 1. react-scripts: 2.0.3 breaks dependencies in lib/display/api.js and build/pdf.js v3.0.5

    Updating create-react-app to v2.0.3 has resulted in this node module to not load PDFs.

    Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    
    ./node_modules/pdfjs-dist/lib/display/api.js
    Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    
    ./node_modules/pdfjs-dist/lib/display/api.js
    Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    
    ./node_modules/pdfjs-dist/lib/display/api.js
    Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    
    ./node_modules/pdfjs-dist/build/pdf.js
    Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    
    ./node_modules/pdfjs-dist/build/pdf.js
    Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    
    ./node_modules/pdfjs-dist/lib/display/api.js
    Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    
    ./node_modules/pdfjs-dist/build/pdf.js
    

    Describe solutions you've tried

    Deleting the module and reinstalling via npm install has resulted in the same issue.

    Additional information

    If applicable, add screenshots (preferably with browser console open) and files you have an issue with to help explain your problem.

    Environment

    • Browser (if applicable) [e.g. Chrome 57, Firefox 59]: N/A
    • React-PDF version [e.g. 3.0.4]: 3.0.5
    • React version [e.g. 16.3.0]: 16.4.1
    • Webpack version (if applicable) [e.g. 4.16.2]: 4.19.1
    • React scripts: 2.0.3
    Reviewed by lilcorey at 2018-10-02 03:31
  • 2. Please help me testing React-PDF 5.0 beta update!

    Hi, React-PDF v5.0.0-beta.5 has been released introducing a few major updates:

    • React-PDF now ships with ES6 Modules
    • Updated pdf.js from 2.1.266 to 2.4.456.

    Breaking changes:

    • You will need to change your imports to bundler-specific entry files, for example instead of:
      import { Document } from 'react-pdf/dist/entry.webpack';
      

      you'll now write:

      import { Document } from 'react-pdf/dist/esm/entry.webpack';
      
    • Dropped support for IE 11 due to pdf.js dropping support

    so upgrade should be a piece of cake.

    Please share your experiences - whether it works correctly in your project, doesn't break the build, and so on.

    Thanks!

    Reviewed by wojtekmaj at 2019-12-07 20:30
  • 3. Webpack production bundling react-pdf is super slow

    Hello,

    Am I the only one experiencing slow build times in production mode? it takes Webpack like 180seconds to build/minify pdf+worker js files, which are probably a peer dependency?

    Have anyone found a working solution to ship it to production without too long bundling times?

    Cheers

    Reviewed by mvirbicianskas at 2017-10-20 06:40
  • 4. Failed to load PDF file

    i am having trouble showing pdf file tried every way from importing as file and directory giving path it is giving an error Failed to load PDF file. And When I am using webpack or parcel it just showing loading PDF.

    Code

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { Document, Page } from 'react-pdf'
    import lesson2 from './lesson2.pdf'
    class App extends Component {
      state = { numPages: null, pageNumber: 1 };
    
      onDocumentLoadSuccess = ({ numPages }) => {
        this.setState({ numPages });
      };
    
      goToPrevPage = () =>
        this.setState(state => ({ pageNumber: state.pageNumber - 1 }));
      goToNextPage = () =>
        this.setState(state => ({ pageNumber: state.pageNumber + 1 }));
    
      render() {
        const { pageNumber, numPages } = this.state;
    
        return (
          <div>
            <nav>
              <button onClick={this.goToPrevPage}>Prev</button>
              <button onClick={this.goToNextPage}>Next</button>
            </nav>
    
            <div style={{ width: 600 }}>
              <Document
                file={lesson2}
                onLoadSuccess={this.onDocumentLoadSuccess}
              >
                <Page pageNumber={pageNumber} width={600} />
              </Document>
            </div>
    
            <p>
              Page {pageNumber} of {numPages}
            </p>
          </div>
        );
      }
    }
    
    export default App;
    

    Folder Structure

    capture1

    Reviewed by saadpasta at 2018-12-12 08:00
  • 5. Visiting react-pdf throws Unhandled rejection: DataCloneError in IE10 on Windows <10

    It looks like react-pdf is not compatible with IE11 and IE10 on Windows version 8.1 (tested through Browserstack). IE11 on Windows 10 does not have this problem. An Unhandled rejection: DataCloneError error is thrown. Tried it with several PDF's, including the react-pdf sample at http://projekty.wojtekmaj.pl/react-pdf/

    I found this closed pdf.js issue which seems related. Any idea?

    Reviewed by michaeldzjap at 2017-10-29 12:01
  • 6. Unexpected token <

    Hi,

    Thank you for maintaining this awesome package :)

    I'm trying to use it in my React app but I get the following error in the console and the component is stuck on loading:

    Uncaught SyntaxError: Unexpected token < http://project_server.dev/app_folder/d58d9dd3a5c5f2a8eafb.worker.js

    I'm loading a base64 PDF served by my Laravel backend. I'm using webpack and everything seem properly set up. The base64 PDF seems file too.

    Any idea what I'm doing wrong?

    Many thanks

    Reviewed by valentinfily at 2017-08-29 12:40
  • 7. How to set 100% width?

    Is there a way to set 100% width to the pdf so that it occupies the full width of the container? I can see width property takes input only in pixels but not in percentage.

    Reviewed by shamanth7077 at 2018-01-10 05:08
  • 8. Compatibility with Webpack 4 / Create React App 2

    Due to PDF.js being tightly coupled with worker-loader, at the moment we can't update the code so that it works with Webpack 4 flawlessly. It might work, but no guarantees can be made.

    The issue has been filed against Mozilla's PDF.js in mozilla/pdf.js#9580 to separate Webpack specific code to another package, which would give us much more flexibility regarding fighting issues like that.

    This issue is to be monitored.

    Reviewed by wojtekmaj at 2018-04-01 18:04
  • 9. require is not defined - pdf is not rendered on Chrome

    Before you start - checklist

    • [x] I followed instructions in documentation written for my React-PDF version
    • [x] I have checked if this bug is not already reported
    • [x] I have checked if an issue is not listed in Known issues
    • [x] If I have a problem with PDF rendering, I checked if my PDF renders properly in Mozilla Firefox

    Description

    After updating the react-pdf library from 5.2.0 to 5.3.0 pdf stopped being rendered on Chrome. All I can see is: Failed to load PDF file.

    On the google chrome console I can find:

    Uncaught ReferenceError: require is not defined

    Zrzut ekranu 2021-05-12 o 11 21 46 Zrzut ekranu 2021-05-12 o 11 22 07

    This problem exists only on google chrome because everything works without any problem on Firefox 88.0.

    Environment

    • Browser: Chrome 90
    • React-PDF version: 5.3.0
    • React version: 17.0.2
    • Webpack version: 4.44.2
    Reviewed by tomaszzmudzinski at 2021-05-12 09:28
  • 10. Cannot find module 'worker-loader!./build/pdf.worker.js'

    hello,

    is there anything i have to do besides import { Document, Page } from 'react-pdf/build/entry.webpack' to use service workers? i'm running react-pdf 2.1.1 and nextjs (in case that's of any relevance).

    thank you! nicolai

    index.js?d08fcf9:101 Cannot find module 'worker-loader!./build/pdf.worker.js'
    Error: Cannot find module 'worker-loader!./build/pdf.worker.js'
        at Function.Module._resolveFilename (module.js:485:15)
        at Function.Module._load (module.js:437:25)
        at Module.require (module.js:513:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> ([...]/node_modules/pdfjs-dist/webpack.js:18:19)
        at Module._compile (module.js:569:30)
        at Module._compile ([...]/node_modules/source-map-support/source-map-support.js:483:25)
        at Object.Module._extensions..js (module.js:580:10)
        at Module.load (module.js:503:32)
        at tryModuleLoad (module.js:466:12)
    
    Reviewed by nnals at 2017-09-25 20:26
  • 11. TypeScript and definitions.

    Im wondering if typings could be added/maintained for this project? Iv got a patch almost ready to go in my own repo i could add it? Would it be too bold of me to even propose a conversion to TS? bitmoji

    Reviewed by danno-ax at 2017-08-29 01:34
  • 12. Images and text are not crisp when compared to PDF link

    Before you start - checklist

    • [X] I followed instructions in documentation written for my React-PDF version
    • [X] I have checked if this bug is not already reported
    • [X] I have checked if an issue is not listed in Known issues
    • [ ] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

    Description

    Hi Team, I am having the below issuw while loading a PDF using react-pdf, have chnaged the renderMode and scale but no luck, can anyone help on this, thanks in advance!

    Steps to reproduce

    using react pdf

    Expected behavior

    Below is the pdf direct_pdf

    Actual behavior

    Below image is from React PDF react_pdf

    Additional information

    No response

    Environment

    • Browser (if applicable):
    • React-PDF version:
    • React version:
    • Webpack version (if applicable):
    Reviewed by tejaswibharadwajp at 2022-06-17 19:52
  • 13. 'alt' prop not included in Image component

    Before you start - checklist

    • [X] I followed instructions in documentation written for my React-PDF version
    • [X] I have checked if this bug is not already reported
    • [X] I have checked if an issue is not listed in Known issues
    • [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

    Description

    Currently using React-pdf with Next.JS and typescript and ran into a TS error: Type error: No overload matches this call. Overload 1 of 2, '(props: ImageProps | Readonly<ImageProps>): Image', gave the following error. Type '{ style: { width: string; marginBottom: number; }; src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<Image> & (Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>))'. Property 'alt' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes<Image> & (Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>))'. Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error. Type '{ style: { width: string; marginBottom: number; }; src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<Image> & (Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>))'. Property 'alt' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes<Image> & (Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>))'.

    if i add this in node modules locally to imageprops it works great but of course not during the deployment build. I could pull current repo and add this as a contributor but for something so small i felt this approach was appropriate. Let me know if im mistaken in any way and thanks for your time on a great library!!

    Steps to reproduce

    create Image component in TS app and add alt prop

    Expected behavior

    alt prop should be available to image component

    Actual behavior

    TS error saying it is not present on the Image components props which is true!

    Additional information

    No response

    Environment

    • Browser (if applicable):
    • 2.2.0:
    • 17.0.2:
    • 5:
    Reviewed by Bohemus307 at 2022-06-14 17:21
  • 14. Upgrade pdfjs to 2.14.305 or be able to supply own version at our own risk without forking

    Before you start - checklist

    • [X] I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
    • [X] I have checked if this feature request is not already reported

    Description

    There are some really great features in the newer versions of pdfjs, specifically I am interested in the dark mode that landed in 2.14.305

    I am using this react-pdf successfully in a nextjs app (an ebook reader essentially) and am trying to understand the best way to be able to use it with the new version.

    Proposed solution

    Upgrade PDFJS to 2.14.305

    Alternatives

    Remove the version enforcement and instead recommend the user to install a particular version themselves, this way people won't need to fork the project to do this.

    Additional information

    The pdfjs release that I am interested in: https://github.com/mozilla/pdf.js/issues/14892

    Reviewed by kfatehi at 2022-06-06 20:57
  • 15. PDFs not rendering perfectly after Chrome update

    Before you start - checklist

    • [X] I followed instructions in documentation written for my React-PDF version
    • [X] I have checked if this bug is not already reported
    • [X] I have checked if an issue is not listed in Known issues
    • [ ] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

    Description

    After a chrome update the pdf no longer renders correctly. It looks like it cuts out some words. Several browsers have been tested and only chrome faces this.

    Steps to reproduce

    Just render a pdf and you'll see

    Expected behavior

    Don't render with cuts

    Actual behavior

    Rendering with cuts (white spaces between words)

    Additional information

    No response

    Environment

    • Browser (if applicable):
    • React-PDF version:
    • React version:
    • Webpack version (if applicable):
    Reviewed by fgouvea10 at 2022-06-06 12:41
  • 16. Expose the http response headers in the onLoadSuccess callback

    Before you start - checklist

    • [X] I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
    • [X] I have checked if this feature request is not already reported

    Description

    In the onLoadSuccess callback when a document is loaded, it would be great to be able to inspect the http headers coming back from the request in the http response.

    Proposed solution

    Extend the PDFDocumentProxy object to also include http response headers. image

    Alternatives

    No response

    Additional information

    No response

    Reviewed by pellec at 2022-06-03 13:43
  • 17. The svg render method isn't rendered text on his expected position

    Before you start - checklist

    • [X] I followed instructions in documentation written for my React-PDF version
    • [X] I have checked if this bug is not already reported
    • [X] I have checked if an issue is not listed in Known issues
    • [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

    Description

    The svg render method isn't rendered text on his actual position in template

    Steps to reproduce

    add to react component this: pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;

    and this: <Document renderMode="svg" file={someBase64file}>

    Expected behavior

    merge params test1.pdf image

    Actual behavior

    image

    Additional information

    No response

    Environment

    • Browser: Chrome 101.0.4951.67 (Official Build) (64-bit)
    • React-PDF version: 5.7.2
    • React version: 17.0.1
    • Webpack version (if applicable): 5.50.0
    Reviewed by PavelRybalko at 2022-05-27 09:52
✉️ Display e-mails in your React.js projects. (Targets Gmail rendering.)
✉️ Display e-mails in your React.js projects. (Targets Gmail rendering.)

react-letter is a React.js component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should m

Jun 18, 2022
Use Pub/Sub pattern inside your React applications easily

spacefold ?? Use Pub/Sub pattern inside your React applications easily! ?? Table of content Demo Why Usage Contribute ?? Demo Like always, a counter a

May 26, 2022
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

Dec 7, 2021
A website made to display poems as a sharing website and resource for students in Singapore American School

7C Poems This is a website made to display poems as a sharing website and resource for students in Singapore American School. It’s made using React, T

May 20, 2022
📑 A React component to easily create demos of other components
📑 A React component to easily create demos of other components

React DemoTab ?? A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

May 22, 2022
Mozaïk is a tool based on nodejs / react / redux / nivo / d3 to easily craft beautiful dashboards
Mozaïk is a tool based on nodejs / react / redux / nivo / d3 to easily craft beautiful dashboards

Mozaïk is a tool based on nodejs / react / redux / d3 to easily craft beautiful dashboards. See demo Features: Scalable layout Themes support Extendab

Jun 18, 2022
Twinkle Tray lets you easily manage the brightness levels of multiple monitors
Twinkle Tray lets you easily manage the brightness levels of multiple monitors

Twinkle Tray lets you easily manage the brightness levels of multiple monitors. Even though Windows 10 is capable of adjusting the backlight on most monitors, it typically doesn't support external monitors. Windows 10 also lacks any ability to manage the brightness of multiple monitors.

Jun 27, 2022
WebApp to check friend's codechef rating & other details easily.

Codechef Cards A WebApp to check friend's codechef rating and other details. Just add username and track your friends progress!! Press delete to remov

Jun 7, 2022
The history library lets you easily manage session history anywhere JavaScript runs.

history · The history library lets you easily manage session history anywhere JavaScript runs. A history object abstracts away the differences in vari

Jun 24, 2022
Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards
Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards

Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards

May 8, 2022
A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css

custom-react-cursor A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css Demo live Installi

May 17, 2022
Live coding in your browser with your favourite language.
Live coding in your browser with your favourite language.

Live coding in your browser with your favourite language.

Nov 20, 2021
LocateJS predicts your location by analyzing your connection and system data.

LocateJS predicts your location by analyzing your connection and system data.

Jun 15, 2022
Showcase your skills on your Github readme or resumé with ease ✨
Showcase your skills on your Github readme or resumé with ease ✨

Showcase your skills on your GitHub or resumé with ease! Powered by Cloudflare Workers ⚡ Docs Example Specifying Icons Themed Icons Icons Per Line Cen

Jun 23, 2022
✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

May 6, 2022
🔍 A package with components for building your dream command palette for your web application.
🔍 A package with components for building your dream command palette for your web application.

A command palette for React A package with components for building your dream command palette for your web application. Features Installation Example

Jun 17, 2022
This repo shows how to connect your React app to StarkNet.

StarkNet.js + React This repo shows how to connect your React app to StarkNet. Content Contracts The contracts directory contains a simple Cairo contr

Apr 24, 2022
Dfkhero - Displays hero nfts in your react app

Hero svg component for react to show your DFK NFTs working on the readme will up

May 21, 2022
Share code between different parts of your full-stack app
Share code between different parts of your full-stack app

Dryduck Every programmer knows dry. Don't repeat yourself. So why repeat yourself across platforms, writing the same thing twice? Dryduck is a tool fo

Dec 18, 2021