DEV Community

Umar Luqman
Umar Luqman

Posted on • Updated on

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 👇

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.

Top comments (2)

bluewater0506 profile image

Could you please help me?
i have react project for print page css.
i will pay for your work.
Please help me.

bluewater0506 profile image

i used the style but react error
react not recognized @