The latest articles on DEV Community by Umar Luqman (@umarlqmn). https://dev.to/umarlqmn https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F376557%2F79a77e65-6b93-41ad-b834-f9faea11aa4b.jpg https://dev.to/umarlqmn en Umar Luqman Fri, 11 Sep 2020 09:54:50 +0000 https://dev.to/umarlqmn/designing-for-print-in-react-5c9h https://dev.to/umarlqmn/designing-for-print-in-react-5c9h <h2> Libraries in React </h2> <p>Before I know there is an easy way to style the components for print, I use <a href="https://github.com/diegomura/react-pdf">@react-pdf/renderer</a> which allow better customization and doesn't use the native browser function. </p> <p>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.</p> <p>Then I found <a href="https://github.com/gregnb/react-to-print">react-to-print</a> library. The library is easy to use and the doc is great. The native print function would work fine in most cases.</p> <h2> Style for print </h2> <p>Here are some CSS snippets I wish I know it earlier for printing web pages </p> <h3> Style for printing separately 👇 </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MWCdAUpZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.prismic.io/blog-next/e8c01362-56ca-4043-8ad9-6c82e46ebafe_carbon%2B%25283%2529.png%3Fauto%3Dcompress%2Cformat" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MWCdAUpZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.prismic.io/blog-next/e8c01362-56ca-4043-8ad9-6c82e46ebafe_carbon%2B%25283%2529.png%3Fauto%3Dcompress%2Cformat" alt="print preview in react snippet 1"></a></p> <h3> Avoid page styling break when a page break </h3> <p>CSS to avoid the component being cut when there is a page break 👇</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MWCdAUpZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.prismic.io/blog-next/e8c01362-56ca-4043-8ad9-6c82e46ebafe_carbon%2B%25283%2529.png%3Fauto%3Dcompress%2Cformat" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MWCdAUpZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.prismic.io/blog-next/e8c01362-56ca-4043-8ad9-6c82e46ebafe_carbon%2B%25283%2529.png%3Fauto%3Dcompress%2Cformat" alt="print in react snippet 2"></a></p> <p><em>Let me know if anything you would like me to add.</em></p> react css print codesnippet