Skip to content
Invoice component built with React that features dynamic line item inputs and drag-and-drop reordering
JavaScript CSS HTML Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

React Simple Invoice

An example of an Invoice component built with React that enables users to create invoices.

Totals are updated automatically as the user types values into the form fields.

Live Demo:


  • Drag-and-drop reordering of invoice line items implemented with react-beautiful-dnd
  • SCSS Modules and CSS grid for style/layout.
  • SVG UI icons from react-icons (docs:

The project code relates to posts on my blog at

The project was bootstrapped with Create React App v2.

Preview Screenshots

Preview (cropped):


Drag and Drop:

Drag and Drop


To run the project locally in development mode, navigate to the project folder in your Terminal and run:

yarn start

Go to http://localhost:3000 to view it in the browser.




Kevin Firko @firxworx

December 2018

You can’t perform that action at this time.