Component | Conditionally Render

Conditionally render components based on an expression. Expressions are evaluated for truthiness.

Node.js

const shouldRender = true

ui.cond(shouldRender === true, {
    true: ui.text("It's true!"),
    false: ui.text("It's false!")
})

Python

should_render = True

ui.cond(
    should_render == True,
    true=ui.text("It's true!"),
    false=ui.text("It's false!")
)

In cases where either the true or false component is not provided, nothing will be rendered if the condition evaluates to that value.

API reference

Function signature

Node.js

type Component = ReturnType<typeof ui.textInput> | ReturnType<typeof ui.button> | /* more components */ | ReturnType<typeof ui.stack>

ui.cond(
    condition: any,
    options: Partial<{
        true: Component,
        false: Component
    }>
)

Python

# Return type of all ui components
Component = ui.stack | ui.button | ui.text_input | /* more components */ | ui.markdown

ui.cond(
    condition: Any,
    *,
    true: Component,
    false: Component
)

Parameters

Node.js

condition

required any

The condition to evaluate. The condition will be evaluated for truthiness

Python

condition

required Any

The condition to evaluate. The condition will be evaluated for truthiness

---

Node.js

properties.true

optional Component

The component to render if the condition evaluates to true. If not provided, nothing will be rendered.

Python

true

optional Component

The component to render if the condition evaluates to true. If not provided, nothing will be rendered.

---

Node.js

properties.false

optional Component

The component to render if the condition evaluates to false. If not provided, nothing will be rendered.

Python

false

optional Component

The component to render if the condition evaluates to false. If not provided, nothing will be rendered.

---