React.js & Next.js PDF Invoice Templates

A React library for generating beautiful invoices as PDF.

Installation

npm install @mitesh-bhagwant/reactjs-invoice

or

yarn add @mitesh-bhagwant/reactjs-invoice

✨ Features

• Beautiful invoice templates
• Supports all currency symbols
• Lightweight and fast
• Built with TypeScript

Quick Start

"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: "[email protected]",
    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

More invoice templates are coming soon — stay tuned!

License

This library is licensed under CC0 1.0 Universal (CC0-1.0).

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

Contact

• Author: Mitesh Bhagwant
• Email: [email protected]
• Website: https://miteshbhagwant.netlify.app