Handling Text Elements

How text works in React DOCX and when to use each component.

The basics

Three ways to add text:

// 1. Plain string (auto-wrapped)
<Paragraph>Hello world</Paragraph>

// 2. Text component (for styling)
<Paragraph>
  <Text className="font-bold">Hello</Text> world
</Paragraph>

// 3. Formatting shortcuts
<Paragraph>
  <Bold>Hello</Bold> world
</Paragraph>

When to use what

Plain strings

For unstyled text. No wrapper needed:

<Paragraph>This is plain text.</Paragraph>
<H1>Plain heading</H1>
<Li>Plain list item</Li>

Text component

When you need styling:

<Paragraph>
  Status: <Text className="text-green-600 font-bold">Active</Text>
</Paragraph>

Formatting shortcuts

For common formatting without class names:

<Paragraph>
  This is <Bold>bold</Bold>, <Italic>italic</Italic>,
  <Underline>underlined</Underline>, and <Strike>struck</Strike>.
</Paragraph>

Mixing styles

Combine multiple styles in one paragraph:

<Paragraph>
  <Text className="font-bold">Important:</Text> This is
  <Text className="text-red-600"> critical</Text> information.
</Paragraph>

Nest formatting shortcuts:

<Paragraph>
  <Bold>
    <Italic>Bold and italic</Italic>
  </Bold>
</Paragraph>

Add classes to shortcuts:

<Bold className="text-blue-600">Bold and blue</Bold>

Text containers

These components can contain text:

Component	Purpose
`Paragraph`	Body text
`H1`-`H6`	Headings
`Li`	List items
`Td` / `Th`	Table cells
`Link`	Hyperlinks

All work the same way:

<H1>Plain heading</H1>
<H1><Text className="text-blue-600">Styled heading</Text></H1>

<Li>Plain item</Li>
<Li><Bold>Bold item</Bold></Li>

<Td>Plain cell</Td>
<Td><Text className="text-right">Aligned cell</Text></Td>

Common patterns

Label + value

<Paragraph>
  <Text className="font-bold">Name: </Text>John Doe
</Paragraph>
<Paragraph>
  <Text className="font-bold">Email: </Text>john@example.com
</Paragraph>

Status indicators

<Paragraph>
  Status: <Text className="text-green-600 font-bold">✓ Active</Text>
</Paragraph>
<Paragraph>
  Status: <Text className="text-red-600 font-bold">✗ Inactive</Text>
</Paragraph>
<Paragraph>
  Status: <Text className="text-yellow-600 font-bold">⏳ Pending</Text>
</Paragraph>

Highlighted text

<Paragraph>
  The <Text className="bg-yellow-200">key finding</Text> is documented below.
</Paragraph>

Small print

<Paragraph>
  Price: $99.00
  <Text className="text-xs text-gray-500"> (excl. tax)</Text>
</Paragraph>

Inline code

<Paragraph>
  Run <Text className="font-mono bg-gray-100">npm install</Text> to begin.
</Paragraph>

Superscript / subscript

<Paragraph>
  Water is H<Text className="align-sub text-xs">2</Text>O.
</Paragraph>
<Paragraph>
  E = mc<Text className="align-super text-xs">2</Text>
</Paragraph>

Style inheritance

Styles flow from parent to child:

<Document className="font-serif">
  <Section>
    <Paragraph>
      This inherits font-serif from Document.
    </Paragraph>
    <Paragraph className="font-sans">
      This overrides to font-sans.
    </Paragraph>
  </Section>
</Document>

Child styles override parent styles:

<Paragraph className="text-gray-500">
  Gray text with <Text className="text-black">black override</Text>.
</Paragraph>

Special characters

Line breaks

<Paragraph>
  Line one<BreakLine />
  Line two
</Paragraph>

Tabs

<Paragraph>
  Name:<Tab />John Doe
</Paragraph>

Formatting reference

Style	Class	Shortcut
Bold	`font-bold`	`<Bold>`
Italic	`italic`	`<Italic>`
Underline	`underline`	`<Underline>`
Strikethrough	`line-through`	`<Strike>`
All caps	`uppercase`	—
Small caps	`capitalize`	—
Superscript	`align-super text-xs`	—
Subscript	`align-sub text-xs`	—

Anti-patterns

Unnecessary Text wrappers

// ✖ Don't do this
<Paragraph>
  <Text>Plain text that doesn't need a wrapper</Text>
</Paragraph>

// ✓ Do this
<Paragraph>Plain text that doesn't need a wrapper</Paragraph>

Nested paragraphs

// ✖ Won't work
<Paragraph>
  <Paragraph>Nested paragraph</Paragraph>
</Paragraph>

// ✓ Use line breaks instead
<Paragraph>
  First line<BreakLine />
  Second line
</Paragraph>

​The basics

​When to use what

​Plain strings

​Text component

​Formatting shortcuts

​Mixing styles

​Text containers

​Common patterns

​Label + value

​Status indicators

​Highlighted text

​Small print

​Inline code

​Superscript / subscript

​Style inheritance

​Special characters

​Line breaks

​Tabs

​Formatting reference

​Anti-patterns

​Unnecessary Text wrappers

​Nested paragraphs