Skip to main content
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}