npm package: @mitesh-bhagwant/reactjs-invoice
Description: Invoices for React.js
Author: Mitesh Bhagwant
Latest version: 1.1.4

# React.js & Next.js PDF Invoice Templates

A React library for generating beautiful invoices as PDF.

## Installation

```bash
npm install @mitesh-bhagwant/reactjs-invoice
```

or

```bash
yarn add @mitesh-bhagwant/reactjs-invoice
```

## ✨ Features

- Beautiful invoice templates
- Supports all currency symbols
- Lightweight and fast
- Built with TypeScript

## Quick Start

```tsx
"use client";

import {
  DownloadInvoiceButton,
  InvoiceData,
} from "@mitesh-bhagwant/reactjs-invoice";

const invoiceData: InvoiceData = {
  company: {
    name: "Panda, Inc",
    address: "Business address",
    city: "City",
    state: "State",
    country: "IN",
    postalCode: "000 000",
    phone: "+91 0000000000",
    website: "www.website.com",
    email: "hello@email.com",
    taxId: "TAX ID 00XXXXXX1234X0XX",
  },
  client: {
    name: "Company Name",
    address: "Company address",
    city: "City",
    country: "Country",
    postalCode: "00000",
    phone: "+0 (000) 123-4567",
  },
  invoice: {
    number: "#AB2324-01",
    date: "01 Aug, 2023",
    currency: "USD",
    amount: "$4,950.00",
  },
  tableHeaders: ["Item Detail", "QTY", "Rate", "Amount"],
  tableItems: [
    {
      item1: { innerItem1: "main title", innerItem2: "description" },
      item2: 2,
      item3: 1,
      item4: 1500,
      item5: "$1,500.00",
    },
    {
      item1: "Item Name",
      item2: 1,
      item3: 1,
      item4: 1500,
      item5: 1500,
    },
  ],
  totals: {
    subtotal: 3900,
    tax: 450,
    taxPercentage: 10,
    grandTotal: "₹4950",
  },
  footer: {
    title: "Terms & Conditions",
    note: "Please pay within 15 days of receiving this invoice.",
  },
  secondaryColor: "#5E6470",
  primaryColor: "#f97316",
};

export default function Invoice() {
  return (
    <div>
      <h1>Invoice Demo</h1>
      <DownloadInvoiceButton
        invoiceData={invoiceData}
        template="default"
        fileName="my-invoice.pdf"
        className="bg-amber-100 px-2 py-4 text-black"
      >
        Download Invoice
      </DownloadInvoiceButton>
    </div>
  );
}
```

## Usage

### Invoice Data Interface

| Field                    | Type               | Required | Description                                          |
| ------------------------ | ------------------ | -------- | ---------------------------------------------------- |
| **company.name**         | `string`           | ✅       | Company name (e.g., "Panda, Inc")                    |
| **company.address**      | `string`           | ❌       | Company address                                      |
| **company.city**         | `string`           | ❌       | Company city                                         |
| **company.state**        | `string`           | ❌       | Company state                                        |
| **company.country**      | `string`           | ✅       | Company country code (e.g., "IN", "US")              |
| **company.postalCode**   | `string`           | ❌       | Postal / ZIP code                                    |
| **company.phone**        | `string`           | ❌       | Company phone number                                 |
| **company.email**        | `string`           | ❌       | Company email address                                |
| **company.website**      | `string`           | ❌       | Company website                                      |
| **company.taxId**        | `string \| number` | ❌       | Tax ID / GST number                                  |
| **client.name**          | `string`           | ❌       | Client / customer name                               |
| **client.address**       | `string`           | ❌       | Client address                                       |
| **client.city**          | `string`           | ❌       | Client city                                          |
| **client.state**         | `string`           | ❌       | Client state                                         |
| **client.country**       | `string`           | ✅       | Client country                                       |
| **client.postalCode**    | `string`           | ❌       | Postal / ZIP code                                    |
| **client.phone**         | `string`           | ❌       | Client phone number                                  |
| **client.email**         | `string`           | ❌       | Client email address                                 |
| **invoice.number**       | `string`           | ✅       | Invoice number (e.g., `#AB2324-01`)                  |
| **invoice.date**         | `string`           | ✅       | Invoice issue date                                   |
| **invoice.dueDate**      | `string`           | ❌       | Invoice due date                                     |
| **invoice.currency**     | `string`           | ❌       | Currency code (e.g., "USD", "INR")                   |
| **invoice.amount**       | `string`           | ❌       | Total amount (e.g., "$4950.00")                      |
| **tableHeaders**         | `string[]`         | ✅       | Column headers for invoice table                     |
| **tableItems**           | `object[]`         | ✅       | Line items for the invoice (supports nested objects) |
| **totals.subtotal**      | `number \| string` | ❌       | Subtotal before tax/discount                         |
| **totals.tax**           | `number \| string` | ❌       | Tax amount                                           |
| **totals.discount**      | `number \| string` | ❌       | Discount applied                                     |
| **totals.grandTotal**    | `number \| string` | ❌       | Final total amount                                   |
| **totals.taxPercentage** | `number \| string` | ❌       | Tax percentage                                       |
| **footer.title**         | `string`           | ❌       | Footer section title (e.g., "Terms & Conditions")    |
| **footer.note**          | `string`           | ❌       | Footer note (e.g., "Please pay within 15 days.")     |
| **primaryColor**         | `string`           | ❌       | Primary theme color (hex)                            |
| **secondaryColor**       | `string`           | ❌       | Secondary theme color (hex)                          |

## Demo

### Default Invoice

![Default Invoice](https://res.cloudinary.com/dinh0kzzq/image/upload/v1756295046/Default-Invoice_d3ev8s.webp)

More invoice templates are coming soon — stay tuned!

## License

This library is licensed under [CC0 1.0 Universal (CC0-1.0)](https://creativecommons.org/publicdomain/zero/1.0/).

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

## Contact

- **Author:** Mitesh Bhagwant
- **Email:** [miteshbhagwant@gmail.com](mailto:miteshbhagwant@gmail.com)
- **Website:** [https://miteshbhagwant.netlify.app](https://miteshbhagwant.netlify.app)