DEV Community

loading...

Designing for Print in React

umarlqmn profile image Umar Luqman ・Updated on ・1 min read

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 πŸ‘‡

print preview in react snippet 1

Avoid page styling break when a page break

CSS to avoid the component being cut when there is a page break πŸ‘‡

print in react snippet 2

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

Discussion (0)

pic
Editor guide