Designing for Print in React

Libraries in React

Before I know there is an easy way to style the components for print, I use @react-pdf/renderer which allow better customization and doesn't use the native browser function.

But I need to recreate the same component again using the primitive component from the library. It was double the work for my use case.

Then I found react-to-print library. The library is easy to use and the doc is great. The native print function would work fine in most cases.

Style for print

Here are some CSS snippets I wish I know it earlier for printing web pages

Style for printing separately 👇

Avoid page styling break when a page break

CSS to avoid the component being cut when there is a page break 👇

Let me know if anything you would like me to add.