Template Variables - htmldocs

Overview

Template variables allow you to create dynamic documents by passing data to your templates. This guide shows you how to define and use template variables in your JSX templates.

Using Template Variables

Create a template component that accepts props for dynamic content:

import { Document } from "@htmldocs/react";

interface InvoiceProps {
  customerName: string;
  items: {
    name: string;
    quantity: number;
    price: number;
  }[];
}

function Invoice({ customerName, items }: InvoiceProps) {
  return (
    <Document>
      <h1>Invoice for {customerName}</h1>
      <div className="items">
        {items.map((item, index) => (
          <div key={index} className="item">
            <span>{item.name}</span>
            <span>{item.quantity}</span>
            <span>${item.price}</span>
          </div>
        ))}
      </div>
    </Document>
  );
}

export default Invoice;

Preview Props

Define preview data for development and testing using PreviewProps:

Invoice.PreviewProps = {
  customerName: "Acme Corporation",
  items: [
    {
      name: "Premium License",
      quantity: 1,
      price: 999.00
    },
    {
      name: "Support Package",
      quantity: 2,
      price: 299.00
    }
  ]
};

Complex Objects

You can use nested objects and arrays for more complex templates:

interface CompanyInfo {
  name: string;
  address: {
    street: string;
    city: string;
    state: string;
    zip: string;
  };
  contact: {
    email: string;
    phone: string;
  };
}

interface ReceiptProps {
  orderNumber: string;
  date: string;
  company: CompanyInfo;
  items: {
    name: string;
    quantity: number;
    price: number;
  }[];
}

Receipt.PreviewProps = {
  orderNumber: "ORD-123456",
  date: new Date().toLocaleDateString(),
  company: {
    name: "Acme Corp",
    address: {
      street: "123 Business Ave",
      city: "San Francisco",
      state: "CA",
      zip: "94105"
    },
    contact: {
      email: "info@acme.com",
      phone: "(555) 123-4567"
    }
  },
  items: [
    {
      name: "Product A",
      quantity: 1,
      price: 99.99
    }
  ]
};

Dynamic Values

You can use JavaScript expressions and functions in your preview props:

Document.PreviewProps = {
  orderNumber: `ORD-${Math.random().toString(36).substr(2, 9).toUpperCase()}`,
  date: new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }),
  total: calculateTotal(items)
};