ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Dynamic rendering

Cond

rx.cond

Official docs

Workshop order

Put a log-in button in the shop's header. Once logged in, the user's name and a log-out button should appear in its place.

rx.cond(condition, A, B) shows A when the condition is true and B when it is false. The condition is usually a State value. A Python if runs only once, when the page is built, so it can't switch the screen based on State values. To choose again every time the value changes in the browser, use rx.cond.

Text 1

class CondBasicState(rx.State):
    show: bool = True

    @rx.event
    def change(self):
        self.show = not self.show


rx.vstack(
    rx.button("Toggle", on_click=CondBasicState.change),
    rx.cond(
        CondBasicState.show,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
)

Try the conditions

rx.cond has no styling props. Instead, flip the conditions yourself. When you give it two values that aren't components (here, color names), as in the second line, rx.cond becomes a Var that picks a value instead of a component, and it can go in a prop.

Try the props

Text 1

Status

show

rx.hstack(
    rx.cond(
        True,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
    rx.badge(
        "Status",
        color_scheme=rx.cond(True, "green", "red"),
    ),
    spacing="4",
    align="center",
)

show decides which text appears, ok decides the badge's color_scheme. In a real app, State values go here.

Argument	Values	Use
first (`cond`)	Var (usually bool)	What to decide on. Empty strings, 0, empty lists and so on count as false
second	component or value	What to show when true
third	component or value	What to show when false. Can be omitted for components

Omitting the second component

The third argument can be omitted. Then nothing is shown when the condition is false. Use this for "show only if present". It can't be omitted when used as a prop value (two values).

This text appears when condition is True

This text is always visible

class CondOptionalState(rx.State):
    show_optional: bool = True

    @rx.event
    def toggle_optional(self):
        self.show_optional = not self.show_optional


rx.vstack(
    rx.button("Toggle", on_click=CondOptionalState.toggle_optional),
    rx.cond(
        CondOptionalState.show_optional,
        rx.text("This text appears when condition is True", color="green"),
    ),
    rx.text("This text is always visible", color="gray"),
)

Negation: ~

Put ~ in front of a Var to flip the condition (Python's not). You can't use not on a Var, so use ~. The two lines below always show the opposite of each other.

Text 1

Text 2

class CondBasicState(rx.State):
    show: bool = True

    @rx.event
    def change(self):
        self.show = not self.show


rx.vstack(
    rx.button("Toggle", on_click=CondBasicState.change),
    rx.cond(CondBasicState.show, rx.text("Text 1", color="blue"), rx.text("Text 2", color="red")),
    rx.cond(~CondBasicState.show, rx.text("Text 1", color="blue"), rx.text("Text 2", color="red")),
)

Several conditions: & and |

Between Vars, use & (and) and | (or) instead of and/or. Because & and | are evaluated before >=, comparisons must be wrapped in parentheses. Below, you can work if you are between 18 and 65, and a discount badge appears if you are under 13 or 65 and over.

Age: 19

You can work!

import random


class CondComplexState(rx.State):
    age: int = 19

    @rx.event
    def change(self):
        self.age = random.randint(0, 100)


rx.vstack(
    rx.button("Random age", on_click=CondComplexState.change),
    rx.text(f"Age: {CondComplexState.age}"),
    rx.cond(
        (CondComplexState.age >= 18) & (CondComplexState.age <= 65),
        rx.text("You can work!", color="green"),
        rx.text("You cannot work!", color="red"),
    ),
    rx.cond(
        (CondComplexState.age < 13) | (CondComplexState.age >= 65),
        rx.badge("Discount ticket", color_scheme="orange"),
    ),
)

Nesting: if, elif, else

Put another rx.cond in the third slot of rx.cond and you get an elif. The one below tells positive, zero and negative apart.

0 is Zero!

import random


class CondNestedState(rx.State):
    num: int = 0

    @rx.event
    def change(self):
        self.num = random.randint(-10, 10)


rx.vstack(
    rx.button("Random number", on_click=CondNestedState.change),
    rx.cond(
        CondNestedState.num > 0,
        rx.text(f"{CondNestedState.num} is Positive!", color="orange"),
        rx.cond(
            CondNestedState.num == 0,
            rx.text(f"{CondNestedState.num} is Zero!", color="blue"),
            rx.text(f"{CondNestedState.num} is Negative!", color="red"),
        ),
    ),
)

As a slightly more involved example, here is Python code that finds the largest of three numbers and says so when some numbers are equal.

a = 8
b = 10
c = 2

if (a > b and a > c) and (a != b and a != c):
    print(a, " is the largest!")
elif (b > a and b > c) and (b != a and b != c):
    print(b, " is the largest!")
elif (c > a and c > b) and (c != a and c != b):
    print(c, " is the largest!")
else:
    print("Some of the numbers are equal!")

Translated into three nested rx.conds, the same logic looks like this. "Largest" means greater than the other two, so there's no need for a separate check that they differ. Press shuffle and check the cases where numbers repeat too. With more branches than this, Match is easier to read.

a=8 b=10 c=2

10 is the largest!

import random


class CondLargestState(rx.State):
    a: int = 8
    b: int = 10
    c: int = 2

    @rx.event
    def shuffle(self):
        self.a, self.b, self.c = (random.randint(1, 4) for _ in range(3))


rx.vstack(
    rx.hstack(
        rx.button("Shuffle", on_click=CondLargestState.shuffle),
        rx.code(f"a={CondLargestState.a} b={CondLargestState.b} c={CondLargestState.c}"),
        align="center",
    ),
    rx.cond(
        (CondLargestState.a > CondLargestState.b) & (CondLargestState.a > CondLargestState.c),
        rx.text(f"{CondLargestState.a} is the largest!"),
        rx.cond(
            (CondLargestState.b > CondLargestState.a) & (CondLargestState.b > CondLargestState.c),
            rx.text(f"{CondLargestState.b} is the largest!"),
            rx.cond(
                (CondLargestState.c > CondLargestState.a) & (CondLargestState.c > CondLargestState.b),
                rx.text(f"{CondLargestState.c} is the largest!"),
                rx.text("Some of the numbers are equal!"),
            ),
        ),
    ),
)

Filling the order

A single logged-in flag switches the whole right-hand area. When true, it shows the avatar, name and log-out button together; when false, a single log-in button.

Shop

class CondLoginState(rx.State):
    logged_in: bool = False
    user: str = "Ada"

    @rx.event
    def log_in(self):
        self.logged_in = True

    @rx.event
    def log_out(self):
        self.logged_in = False


rx.hstack(
    rx.text("Shop", weight="bold"),
    rx.spacer(),
    rx.cond(
        CondLoginState.logged_in,
        rx.hstack(
            rx.avatar(fallback=CondLoginState.user[0], size="2", radius="full"),
            rx.text(CondLoginState.user, size="2"),
            rx.button("Log out", on_click=CondLoginState.log_out, size="1", variant="soft", color_scheme="gray"),
            align="center",
        ),
        rx.button("Log in", on_click=CondLoginState.log_in, size="2"),
    ),
    width="100%",
    max_width="420px",
    align="center",
    padding="10px 14px",
    border=f"1px solid {rx.color('gray', 6)}",
    border_radius="10px",
)

Workshop notes

rx.cond(condition, when true, when false). A Python if can't be used on State values.
The false component can be omitted. Give it two values and it becomes a Var for a prop.
Negate with ~; and/or are & and |. Always wrap comparisons in parentheses.
For elif, nest rx.cond. With many branches, use rx.match.

← Previous

Overlay · Toast

Dynamic rendering · Match

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.