DEV Community

Umar Luqman
Umar Luqman

Posted on • Edited on

4

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.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (2)

Collapse
 
bluewater0506 profile image
ilya

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

Collapse
 
bluewater0506 profile image
ilya

i used the style but react error
react not recognized @
why?
Please..

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay