How to print Reactive Form data with Custom Styling using React-to-print and Redux.
Hi Guys ,in this article we will discuss about how to create a printable React component using react-to-print.When we created a React component and we would always love to give end users the ability to print out the contents of that component, react-to-print aims to solve that by popping up a print window with CSS styles copied over as well.
To get more clarity on functionality of react-to-print,we would like to create a reactive form using formik , we can submit the form on clicking on register button ,we can get printed form of whatever data we have entered on clicking on the print button. In this article we will not going to discuss how to create reactive forms using formik, for more details about formik refer to one of my previous article:
So let’s start coding,let’s see the folder structure:
This is the basic folder structure which we get by running following command on terminal: npx create-react-app <project name> , we have added component folder in src , which contains the actually react component, print folder in src,contains the react component which react-to print will be printing.For including redux in our codebase , we have created store.js file,reducer.js file,actions.js file and actionTypes.js file.Let’s see the App.js file:
Our App.js is pretty straightforward ,we are importing our Form component from component folder and rendering it in App.js. Let’s see the index.js:
Before moving to further discussion ,we should know that we have installed few npm packages like: formik, yup ,react-redux,redux and react-to-print , we will run the following command to install those package in our terminal:
npm i formik yup react-redux redux react-to-print
So in Index.js , we are importing our App.js , Provider from react-redux and our store , after that we wrap our App.js with provider which gives every child of App.js access to our global store, I think we have knowledge of basic redux concept. Store acts as the global store house of data of our application and reducers actually manipulates those data according to type of action dispatched . So Provider actually provides all the child component of our root component (App.js) the access to that global store so that they can share data from store.Now Let’s see the global store:
In store.js , we are importing createStore from redux and addReducer from reducer file, we are creating our global store by the passing addReducer on createStore function.Now let’s see the Reducer file:
So in reducer.js we have all our initial states we required from our application. We are going to create a form where user will enter their details like email, password,address,pincode and phone no, for that we have kept those as initialState in reducer. and addReducer is the function which will actually act as the manipulator of our store data. According to action type our reducer actually manipulate the store data, for that reason we are using switch case on action.type.We will get more clarity as we proceed with our discussion. Now let’s see the actionTypes.js:
ActionTypes.js actually contains the action types which are going to dispatch from our application.Since our application have only one action which is triggered when user click on the submit button of form, we have created one const SUBMIT.Now let’s see the actions.js file:
In our application we have one action which triggers when user clicks on Submit button of our reactive forms , So in actions.js we have one function called submitAction, we have imported SUBMIT const from actionTypes.js. When user actually clicks on submit button submitAction action gets dispatched which contains two parameter action types and action payload , action type contains SUBMIT and payload contains the data that user entered on the form so that those data can be updated by reducer in our global store.Now let’s see our reactive form:
In Component.js ,we have imported ReactToPrint from ‘react-to-print’ and CardPrint from print folder, CardPrint is the component which react-to-print will be printing after user clicks on print button in our reactive form. We imported Formik,Field,Form,ErrorMessage from Formik and Yup from Yup.Actually formik is used to create reactive forms and Yup is used to add validations to all fields in our reactive form.So First to We are keeping our Print Component the component which will be printed when user click on print Button.In order to print a React component we use reference to that react component , and use that reference as the content of the ReactToPrint , and we will keep our Print Button in the trigger parameter of ReactToPrint , means print function will trigger whenever user clicks on print button.Now the reference must be present inside the same component , So we imported our CardPrint component inside our form component and give it an inline style display: ‘none’ means it will not be visible in our form. We also passed all the details that user entered from store to our CardPrint so that we can render those in any way we want on our CardPrint component.We have connected our Form component with mapStateToProps and mapDispatchToProps. mapStateToProps is actually allows our component to render the store data , our component can access store data as their props. mapDispatchToProps actually dispatches the action which is triggered to manipulate the store data.We have imported submitAction from actions.js. So we are passing that action as the props of our Form component, So that when user clicks on the Register Button (Submit ) our Form component can call this dispatch function. So we importing all those as props of our Form component.For the submit functionality and error handling part of the form we can refer to the article mentioned above, it’s just the modified version of that code.So onSubmit of the form we are dispatching the submitAction and passing fields as the payload of the action, So now if we check the reducer file we will notice that all the initial states are getting updated by the data we passed as action.payload, means when user clicks on Register button (Submit ) our store data are getting updated. Those data are also passed our CardPrint (Print Component) .Now let’s see the CardPrint component:
So our CardPrint component is getting all the updated store value so when user clicks on Print button of our reactive form. They will get a printed copy of the data they entered in the form ,and that is nothing but the print copy of our CardPrint component!!!! Our CardPrint is simple one we have just added some inline style to make little presentable to our user. We can use our creative minds to design attractive print copy for our user using our css capability !! isn't it wonderful.So our form is ready , let see our printable and reactive form.
So React is having many such npm package which actually makes many exciting things , The only things which are required are investing time,deep driving, experimenting and exploring unknown abilities of react and javascript. We can also refer the official documentation of react-to-print :
I am leaving my github repo as a reference to this article, it’s having the code base of this tutorial:
HAPPY CODING …..:)
