Generate invoice with React-js
Are you new to react and you want to create something new with it?! Then this article is for you. Here we are going to create a billing application which could just convert our HTML form into a PDF file which will look like a copy of bill. Let’s get started!
Prerequisite:
//For creating react app named practise:
npx create-react-app practise//To create pdf file in form of table:
npm i jspdf
npm i jspdf-autotable
About our app:
Our app will have the following qualities:
- We could add item name, quantity, cost of one item and their corresponding total which we will calculate based on the number of quantity and cost we add in the input box.
- Also we are going to calculate total billing amount based on total of each items added.
- Upon clicking submit button
Creating state named item:
Let’s create a state named item and then initialize the needed objects value with empty or zero as below,
We have added item name as iname, quantity, amount of one item as amount, then total for each item based on quantity and amount we add.
Creating front-end UI part:
Now, let us create a html form inside App.js file of react app and add all the necessary input fields inside of it like below,
In the above code, we are making use of item as array and trying to create that many input fields based on that item count.
Adding more input box upon clicking add button:
Now let’s add some more features to our static website. Let’s add onClick functionality which could add additional textbox upon clicking the add button. Also lets add addItem function which could change state of item with setItem function.
<button type='button' onClick={addItem}>Add+</button>Handling change in input box:
Whenever we change input box values, we need to update it to our state value named ‘item’ for calculating the total of each item added in the form. Let’s create a function handleChange and then change those accordingly,
Adding functionality to remove button:
Now it’s time to add function to remove button. Upon clicking remove button, we should pass the index value of corresponding input field and then remove that index value from item. We could do that with below piece of code,
<button key={index} onClick={() => removeEntry(index)}>Remove</button>Calculating total billing amount:
We are almost near to the creation of billing app. It’s time to calculate total billing amount based on our inputs which we gave in each input fields. Let’s add a total billing amount as new state and also add it inside our form tag which could change dynamically,
Inside form:
<h3>Total amount: {billTotal ? billTotal : 0}</h3>Modifying billing amount with react useEffect:
Converting html form into PDF:
Now we have come to end of our coding part. We need to convert our form values whichever we added into a PDF file. Lets import the jspdf and jspdf-autotable and then add handleSubmit function to the App.js file.
import { jsPDF } from "jspdf";import autoTable from 'jspdf-autotable'
That’s it!! We are done with the conversion of HTML form into PDF with React. Your final App.js will look like below,
My completed react project can be found in following git repository — link
I will add one more functionality of saving it in database and do another blog about it.
Happy coding :-)
