Skip to main content

Tags

Tags are special components that perform operations on a section of your template. TemplateDX provides a set of built-in tags that you can use to manipulate and transform data within your templates. Or, you can create your own custom tags.

Creating Custom Tags​

Documentation coming soon.

Built-In Tags​

ForEach​

The ForEach tag allows you to loop through an array.

Syntax

<ForEach arr={props.arr}>
  {(item, index) => ...}
</ForEach>

Parameters

  • arr: Array<T> An array of items you want to iterate on
  • children: (item: T, index: number) => Node - A callback function for each item

Example

<ForEach arr={[1, 2]}>
  {(item, index) => (
    <>
      * item: {item}, index: {index}
    </>
  )}
</ForEach>

Output:

* item: 1, index: 0
* item: 2, index: 1

Conditionals​

The If, ElseIf and Else tags allows you to conditionally output content.

Syntax

<If condition={props.boolA}>
  ...
</If>
<ElseIf condition={props.boolB}>
  ...
</ElseIf>
<Else>
 ...
</Else>

Parameters

If/ElseIf:

  • condition: boolean - The condition to check
  • children: Node - The node to render if condition is true

Else:

  • condition: boolean - The Node to render if the else conditon gets triggered.

Example

<If condition={1 + 1 == 3}>
  1 + 1 is not 3
</If>
<ElseIf condition={1 + 1 == 2}>
  1 + 1 is 2
</ElseIf>
<Else>
  Fallback
</Else>

Output:

1 + 1 is 2

Raw​

The Raw tag allows you to output raw text without interpolation.

Syntax

<Raw>
  ...
</Raw>

Parameters

  • children: Node - The raw text

Example

<Raw>
  {props.name}
</Raw>

Output:

\{props.name}