React-pdf: Hey! 👋 Yes, you! Please help me testing the next big React-PDF update!

[wojtekmaj]

Dear community,
the new version of React-PDF, v3.0.0, is approaching fast! There's a ton of exciting features and improvements coming:

• Context-based architecture, so you don't have to put <Page /> directly under <Document /> component anymore! ⚙️
• Support for Parcel bundler 📦
• Easier styling thanks to more predictable, more thought-out DOM structure
• Better support for SSR ⚙️
• Lots of performance improvements 🚀
• Smarter error messages for easier debugging 🚨

All of major features I planned, apart from Parcel support (externally blocked on Parcel's side) are ready! As the project's user base is now bigger than ever, I really need your feedback on pre-release v3.

Okay, I'm in! What can I do?

Straight to the point:

• npm install react-pdf@next
• Check the Wiki for updates you might need to do
• Give fresh React-PDF a test ride!

What should I report back? 💬

• Was installing and updating relatively painless? Is there anything missing from documentation or Wiki?
• Is everything working as expected on your configuration?

If you have no feedback, please give this post a 👍 or 👎 to let me know you participated! No issues is also a valuable information for me!

[hellqvist]

It seems to work fine for me but why do you set position: relative direclty on the page instead of in the page class? position: relative makes it hard to use the component on a page with a sticky/fixed header since the document scrolls on top of the everything.

Also when it comes to with of the page, it would be nice to be able to set the width in percentage.

[sjungwirth]

I get fake worker warning when using with create react app, is that expected?

I noticed because performance was terrible trying to load a 400 page pdf (a book), even when using an infinite scroll component (react-list).

[wojtekmaj]

@hellqvist:
The reason position: relative is "strongly" applied on the page is that it is needed for positioning text layer, annotations and other elements rendered on top of <canvas />. If you want to change what goes over what, you can use z-index 0 or -1, or apply position: relative with higher z-index on elements page collides with. I'm afraid there won't be any other solution in the near future.
Width in percentage will be possible in the future, but only for SVG rendering mode and with annotations turned off, due to the way Mozilla's PDF.js works.

[wojtekmaj]

@sjungwirth:
It is not expected, if you followed the instructions for Webpack. Setting fake worker severely affects performance and you should avoid it at all costs. Also, consider not rendering all pages at once, but using solution like react-virtualized to only render what's needed.

[renrizzolo]

Hi @wojtekmaj, just started testing out this library, good stuff.
In the @next version, annotation layers are not being placed correctly when the pdf scale is changed (they stay in the same place and don't resize). (I have imported the annotation layer css file).
I made a simple create-react-app app using your Sample component to confirm.

Anything you can think of that has changed that might have broken this?

[wojtekmaj]

Hi @renrizzolo, thanks for the heads-up. I'll look on this after work :)

[iaincollins]

As feedback, since upgrading to 3.0.0 (to address #145) the performance improvements are noticeable and the upgrade went very smoothly.

[wojtekmaj]

All,
thank you SO much for your support and feedback. v3.0.0 is live!

[renrizzolo]

@wojtekmaj did you get a chance to take a look at the annotations?
I have put a repo here https://github.com/renrizzolo/react-pdf-annotation-test

To see broken annotation resizing:
npm install
npm start
Then resize the browser window. The annotation does not resize or move.

To see it working:
npm install [email protected]
comment out the v3 imports and uncomment the v2.5.3 imports in src/Sample.js
npm start
resize the window. The annotation stays correctly positioned.

In the mean time I hacked a fix; in Page.jsx, pass scale to AnnotationLayer as a prop scale={this.scale} and in AnnotationLayer.jsx, get scale from props rather than context.
So I guess that context is not updating based on the <Page/> scale prop?

[wojtekmaj]

@renrizzolo, that sounds like a bug to me, would you please file a separate issue so we could track it more easily?