Document - React Docx

Root element for every document. Contains one or more sections.

import { Document, Section, Paragraph } from "@cordel/react-docx";

const MyDocument = () => (
  <Document>
    <Section>
      <Paragraph>Hello</Paragraph>
    </Section>
  </Document>
);

Props

Prop	Type	Description
`children`	`ReactNode`	Section elements
`styles`	`DocumentStyles`	Default fonts and heading styles
`metadata`	`DocumentMetadata`	Document metadata (title, author, etc.)
`className`	`string`	Tailwind classes (inherited by children)

Document styles

Configure default fonts and heading styles:

<Document
  styles={{
    defaultFont: {
      name: "Arial",
      size: 11,
    },
    heading1: {
      font: "Arial",
      size: 24,
      bold: true,
      color: "1F4E78",
    },
    heading2: {
      font: "Arial",
      size: 18,
      bold: true,
      color: "2E75B5",
    },
  }}
>
  <Section>
    <H1>Uses heading1 style</H1>
    <H2>Uses heading2 style</H2>
    <Paragraph>Uses defaultFont</Paragraph>
  </Section>
</Document>

Font config

interface FontConfig {
  name?: string;  // Font family
  size?: number;  // Size in points
}

Heading config

interface HeadingStyleConfig {
  font?: string;
  size?: number;
  color?: string;   // Hex without #
  bold?: boolean;
  italic?: boolean;
}

Metadata

Embed metadata in the document’s core properties:

<Document
  metadata={{
    title: "Invoice #1234",
    creator: "Acme Corp",
    subject: "Monthly billing",
    description: "Invoice for January 2024",
    keywords: "invoice, billing",
    category: "Finance",
  }}
>
  <Section>
    <Paragraph>Content</Paragraph>
  </Section>
</Document>

DocumentMetadata

interface DocumentMetadata {
  title?: string;
  subject?: string;
  creator?: string;
  description?: string;
  keywords?: string;        // Comma-separated
  lastModifiedBy?: string;
  category?: string;
}

All fields are optional. Only provided values are written to the file.

Style inheritance

Classes cascade to children:

<Document className="font-serif text-gray-800">
  <Section>
    <Paragraph>Inherits font-serif and text-gray-800</Paragraph>
    <Paragraph className="text-blue-600">
      Inherits font-serif, overrides color
    </Paragraph>
  </Section>
</Document>

Multiple sections

<Document>
  <Section>
    <H1>Title Page</H1>
  </Section>

  <Section margins={{ top: "0.5in" }}>
    <Paragraph>Main content</Paragraph>
  </Section>

  <Section pageSize={{ orientation: "landscape" }}>
    <Paragraph>Wide content</Paragraph>
  </Section>
</Document>

Each section can have different margins, page sizes, headers, and footers.

​Props

​Document styles

​Font config

​Heading config

​Metadata

​DocumentMetadata

​Style inheritance

​Multiple sections