Conditionals

Usage

Block

{{{? <condition> }}}
if output
{{{?? <else-if-condition> }}}
else if output
{{{??}}}
else output
{{{?}}}

Inline

{{? <condition> }}if output{{?? <else-if-condition> }}else if output{{??}}else{{?}}

Examples

Using a if statement

Block

Take this template below that is using a block if statement to conditionally render an css import when the css answer is true.

Dot Template

import React from 'react';
{{{? tps.answers.css }}}
import "styles.css";
{{{?}}}

Result

null

Now when css is false, no output will be displayed.

Result

null

Inline

Take this template that is using a inline if statement to conditionally render a typescript type to the variable when the typescript answer is true.

Dot Template

const name{{? tps.answers.typescript }}: string{{?}} = 'lino';

Result

null

Now when typescript is false, no typescript typings will be added.

Result

null

Using else statements

Block

Take this template that is using a block if-else statement to conditionally render a import statement. If cssLang is modules, it will render an import statement for CSS modules; otherwise, it will render a normal CSS import statement.

Dot Template

import React from 'react';
{{{? tps.answers.cssLang === 'modules'}}}
import styles from './{{= tps.name}}.css';
{{{??}}}
import './{{= tps.name}}.css';
{{{?}}}

Result

null

Now when cssLang is not modules, we will get a normal CSS import statement.

Result

null

Inline

Take this template that is using a inline if-else statement to conditionally render a component name. If component is set to a value, it will use the value of component as the component name; otherwise, it will render a div.

Dot Template

const App = () => {
    return (
        <{{? tps.answers.component }}{{= tps.answers.component }}{{??}}div{{?}}>
            /* contents... */
        </{{? tps.answers.component }}{{= tps.answers.component }}{{??}}div{{?}}>
    );
};

Result

null

Now when component is not set to a value, we will get a div.

Result

null

Using else if statements

Block

Take this template that is using a block else-if statement to conditonally render a import statement. If cssLang is modules, it will render an import statement for CSS modules. Else if css is true, it will render a CSS import statement. Otherwise it will render nothing.

Dot Template

import React from 'react';
{{{? tps.answers.cssLang === 'modules'}}}
import styles from './{{= tps.name}}.css';
{{{?? tps.answers.css }}}
import './{{= tps.name}}.css';
{{{?}}}

Result

null

Now when cssLang is not modules and css is true, you will get a normal css import statement.

Result

null

Lastly when cssLang is not modules and css is false, you will get no rendered output.

Result

null

Inline

Take this template that is using a inline else-if statement to conditonally render a component name. If component is page, it will render the PageComponent with a block prop. Else if component is set to a value, it will render the value as the component name. Otherwise, it will render a div.

Dot Template

const App = () => {
    return (
        <{{? tps.answers.component === 'page' }}PageComponent block{{?? tps.answers.component }}{{= tps.answers.component }}{{??}}div{{?}}>
            /* contents... */
        </{{? tps.answers.component === 'page' }}PageComponent{{?? tps.answers.component }}{{= tps.answers.component }}{{??}}div{{?}}>
    );
};

Result

null

Now when the component answer is not page, it will use whatever the user passed into it. In this case we passed in Box.

Result

null

Lastly, if no answer was given for component, we will get a div.

Result

null