An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Printing in React Made Easy With React-To-Print
Introduction
It is easy to use the regular javaScript print()
method to trigger the printing of a whole window or page of a website.
However, we do not always desire that. We may be interested in printing just a part of that website. In fact, we may not even desire that the part we want to print be visible to the user until the print button is clicked. In doing all these, you still want the styling of that portion to maintained.
All these problem has been fixed in React using the React-To-Print npm package. I will be demonstrating how you can print using the React-To-Print and even hide the component being printed while maintaining the CSS styles.
What is React-To-Print?
This is an npm package that aims to give end users the ability to print out the contents of a component by popping up a print window with CSS styles copied over as well.
Prerequisite
This tutorial assumes that you already have the basic knowledge of JavaScript and React especially the difference between class and functional component.
Starter project
We will be using the app we created here as the starter project of this tutorial. To get the project setup in your local machine, do the following:
- Clone the repo
git clone https://github.com/EBEREGIT/react-auth
- Install the dependencies
npm install
- Load the project on your browser
npm start
Awesome!
Building the component to be Printed
- Create a component to contain the button that triggers the printing of the desired component
import React, { useRef } from "react";import { Button } from "react-bootstrap";import ReactToPrint from "react-to-print";export default function PrintComponent() { let componentRef = useRef(); return ( <> <div> {/* button to trigger printing of target component */} <ReactToPrint trigger={() => <Button>Print this out!</Button>} content={() => componentRef} /> {/* component to be printed */} <ComponentToPrint ref={(el) => (componentRef = el)} /> </div> </> );}
From the code above, we imported the
ReactToPrint
library, then we called theReactToPrint
component in the body. TheReactToPrint
holds the trigger (this can be a button or what so ever we choose) and the content (this is a reference to the component that is to be printed).
Below the ReactToPrint
component is the component to be printed with a ref
connecting it to the ReactToPrint
content props.
Now, let's build the ComponentToPrint
component with the following code:
class ComponentToPrint extends React.Component { render() { return ( <div> <h2 style={{color: "green"}}>Attendance</h2> <table> <thead> <th>S/N</th> <th>Name</th> <th>Email</th> </thead> <tbody> <tr> <td>1</td> <td>Njoku Samson</td> <td>samson@yahoo.com</td> </tr> <tr> <td>2</td> <td>Ebere Plenty</td> <td>ebere@gmail.com</td> </tr> <tr> <td>3</td> <td>Undefined</td> <td>No Email</td> </tr> </tbody> </table> </div> ); }}
- Add the following styles in the
index.css
thead th { padding-right: 50px;}
- Render the component in the
freeComponent.js
file like so:
<PrintComponent />
Don't forget to import the component on top of the file like so:
import PrintComponent from "./PrintComponent";
- Now, navigate to
http://localhost:3000/free
and you should have the following screen:
- When you click on the blue button, you should have the print dialogue with the print previewNotice that the print preview has only the component that we desire to print and the CSS styles are not left out. How awesome!!!
Hiding the component to be printed
Sometimes, we don't want our users to see what is to be printed until the print button is clicked. This is useful when you are generating invoice, receipt and so on. To make this happen, go to the PrintComponent
component in the PrintComponent.js
file.
Replace <ComponentToPrint ref={(el) => (componentRef = el)} />
with the following code
<div style={{ display: "none" }}> <ComponentToPrint ref={(el) => (componentRef = el)} /> </div>
You will still get same result if you click the print button like mine below:
Incredible!!!
IMPORTANT NOTICE!
The trigger component (PrintComponent
in our case) can be either functional or class component but the component to be printed (ComponentToPrint
in our case) must be a class component for it to work.
Conclusion
We have been able to see how to make printing in React very easy. Not just that we can print only the component we want, we can also hide the component and the CSS styles will not be affected.
There are a lot of other functionalities that we didn't touch but are available in the documentation. I encourage you to take your time and look into the documentation, play around with other functionalities and see what you can come up with.
All codes are here
Original Link: https://dev.to/ebereplenty/printing-in-react-made-easy-with-react-to-print-4b3k
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To