Skip to content

Upgrade guide from version 3.x to 4.x

Wojciech Maj edited this page Sep 26, 2019 · 7 revisions

React <16.3 is not supported

React-PDF 4.x takes advantage of new Context API introduced with React 16.3, giving it much improved reliability and stability. Therefore, React <16.3 is not supported.

Non-worker version is gone

Due to Mozilla's changes in PDF.js, it was no longer possible to create a component that works reliably while keeping workers disabled. Therefore, if you used entry.noworker before, you'll have to make necessary updates. Instructions for specific bundlers (Webpack, Parcel, Browserify and others) are to be found in README.

setOptions are now replaced by options prop

Previously, to pass additional options to PDF.js, you'd need to write:

import { setOptions } from 'react-pdf';

setOptions({
  cMapUrl: 'cmaps/',
  cMapPacked: true,
});

Now, to set the same options, you simply pass the options object to Document component like so:

const options = {
  cMapUrl: 'cmaps/',
  cMapPacked: true,
};

// (...)

<Document
  file="myFile.pdf"
  options={options}
/>

Please note that this creates additional possibilities, like setting different options for different Document instances.

SVG rendering works differently

SVG rendering is much closer in how it works to Canvas rendering.

  • You can't read text straight off it anymore
  • TextLayer is rendered over it for accessibility and text selection
  • max-width: 100% CSS is no longer applied

renderAnnotations was renamed to renderAnnotationLayer

If you used renderAnnotations prop, you should be using renderAnnotationLayer now. renderAnnotations is still there for backwards compatibility, but it's no longer guaranteed not to be removed at any given time.