Logic Components

This component provides methods for adding conditional logic.

If

If is a simple conditional component.

Example:

// ...
Div([
    If(variable, [
        Paragraph("Hey! 'variable' evaluates to true :)")
    ]),
]),
// ...

You can add Else and ElseIf methods to chain conditional logic.

Example:

// ...
Div([
    If(variable, [
        Paragraph("Hey! 'variable' evaluates to true :)")
    ]).Else([
        Paragraph("Hey! 'variable' evaluates to false :(")
    ])
]),
// ...

// ...
Div([
    If(variable, [
        Paragraph("Hey! 'variable' evaluates to true :)")
    ]).ElseIf(variable === "hello, world!", [
        Paragraph("Hey! 'variable' evaluates to false :(")
    ])
]),
// ...

Switch

Example:

// ...
Div([
    Switch(n)
        .Case(1, [
            // ...
        ])
        // ...
        .Default([
            // ...
        ])
    .EndSwitch()
]),
// ...

For Each

The ForEach() component takes an object or array and a callback which is provided with the value and the key of each item in the object or array and is expected to return an array of elements.

const items = {
    "Key1": "Value1",
    "Key2": "Value2",
    "Key3": "Value3"
};

// ...
ForEach(items, (value, key, index) => {
    return [
        Paragraph(`${index} - ${key}: ${value}`)
    ]
}),
// ...

const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

// ...
ForEach(items, (value, key, index) => {
    return [Paragraph("Item " + (index + 1))];
}),
// ...

Device

Device is an object with the following methods

• Mobile(components)
• NotMobile(components)
• Small(components)
• Medium(components)
• Large(components)

Device.Mobile([
    Paragraph("Hello, Mobile User :)")
])