Skip to content

Upgrade guide from version 5.x to 6.x

Wojciech Maj edited this page Nov 24, 2023 · 6 revisions

React <16.8 is not supported

React-PDF 6.x will receive updates that will break compatibility with React <16.8. For this reason, we're already dropping support for React versions older than 16.8 to give the team some breathing room.

Legacy build is no longer used

React-PDF supports all modern browsers. It is tested with the latest versions of Chrome, Edge, Safari, Firefox, and Opera.

The following browsers are supported in React-PDF v6:

  • Chrome ≥73
  • Edge (Chromium-based)
  • Safari ≥12.1
  • Firefox ≥45(?)

If you need to support older browsers, you will need to use React-PDF v5. If you need to support Internet Explorer 11, you will need to use React-PDF v4.

TextLayer CSS must now be manually imported

If you want to use text layer in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for text layer to be correctly displayed like so:

import 'react-pdf/dist/esm/Page/TextLayer.css';

customTextRenderer no longer accepts React elements as its return value

If you returned React elements from customTextRenderer, you'll now need to convert them to strings. In most cases, like highlighting specific text, it should be an easy fix. In others, renderToStaticMarkup may help.

onGetTextSuccess is now called with an object containing items and styles

Previously, onGetTextSuccess only got items. To fix your callback, all you need to do is:

-function onGetTextSuccess(items) {
+function onGetTextSuccess({ items }) {
  // …

file-loader must be manually installed when React-PDF is used with Webpack 4

To resolve peer dependency warnings on bundlers other than Webpack, file-loader was changed from being a direct dependency to being an optional peer dependency. React-PDF 6.x will continue to work with Webpack 4. However, you'll need to manually install file-loader package.