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

Layout

Fragment

rx.fragment

Official docs

Workshop order

I need cards to go straight into Grid cells, but depending on a condition I want to add or remove two cards at once.

rx.fragment groups several components into one without leaving a wrapping element on the screen. It is the same as React's Fragment. Use it when you want to put several components where the syntax allows only one (one branch of rx.cond, the value rx.foreach returns, a function's return value). With no wrapping div, the layout of the outer Flex or Grid stays intact.

Component1

Component2

rx.fragment(rx.text("Component1"), rx.text("Component2"))

Driving it with State

Fragment has no visible props, so instead of a props lab, let's drive it with State. One branch of rx.cond holds only one component, so two cards are grouped in a Fragment and added or removed together. Both cards go straight into the Grid's cells.

Show cards 4 and 5

Card 1

Card 2

Card 3

class FragmentExtraState(rx.State):
    show_extra: bool = False

    @rx.event
    def set_show_extra(self, value: bool):
        self.show_extra = value


rx.vstack(
    rx.hstack(
        rx.switch(checked=FragmentExtraState.show_extra, on_change=FragmentExtraState.set_show_extra),
        rx.text("Show cards 4 and 5"),
        align="center",
    ),
    rx.grid(
        rx.card("Card 1"),
        rx.card("Card 2"),
        rx.card("Card 3"),
        rx.cond(
            FragmentExtraState.show_extra,
            rx.fragment(rx.card("Card 4"), rx.card("Card 5")),
        ),
        columns="3",
        spacing="2",
        width="100%",
    ),
    width="100%",
)

Prop	Values	Default	Use
`*children`	several components	none	The children to group. They render as they are, with no wrapping element

Since a Fragment leaves no element on the screen, there is nowhere to put styles (width, padding …) or events like on_click. Passing them has no effect and React shows a warning. If you need styles, wrap with rx.box.

Compared with wrapping in a Box

Both Grids group cards 2 and 3 together. On the left it is a Fragment, so 2 and 3 each take a cell of their own. On the right it is a Box, so 2 and 3 stack inside a single cell, and card 4 lands somewhere else too.

rx.flex(
    rx.grid(
        rx.card("1"),
        rx.fragment(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    rx.grid(
        rx.card("1"),
        rx.box(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    justify="between",
    align="start",
    width="100%",
)

Returning several from foreach and functions

The function in rx.foreach must return one component per item. To return two cells, such as a name and a price, group them in a Fragment. The outer columns="2" Grid then places the name in the left cell and the price in the right, lining them up like a table.

Coffee

Tea

Cake

class FragmentMenuState(rx.State):
    items: list[list[str]] = [["Coffee", "$3"], ["Tea", "$2"], ["Cake", "$5"]]


def fragment_menu_row(row):
    return rx.fragment(
        rx.text(row[0]),
        rx.text(row[1], text_align="right", weight="bold"),
    )


rx.grid(
    rx.foreach(FragmentMenuState.items, fragment_menu_row),
    columns="2",
    spacing_y="2",
    width="200px",
)

Filling the order

Members see two more cards; everyone else sees a single notice card spanning two cells. The first branch of rx.cond is a Fragment, so the two cards go straight into the Grid's cells.

Mug

Plate

Gold mug

Gold plate

class FragmentOrderState(rx.State):
    members_only: bool = True

    @rx.event
    def toggle_members(self):
        self.members_only = not self.members_only


rx.vstack(
    rx.button(
        rx.cond(FragmentOrderState.members_only, "Show public view", "Show member view"),
        on_click=FragmentOrderState.toggle_members,
        variant="soft",
    ),
    rx.grid(
        rx.card("Mug"),
        rx.card("Plate"),
        rx.cond(
            FragmentOrderState.members_only,
            rx.fragment(rx.card("Gold mug"), rx.card("Gold plate")),
            rx.card("Members get two more items", grid_column="span 2"),
        ),
        columns="2",
        spacing="2",
        width="100%",
        max_width="320px",
    ),
)

Workshop notes

rx.fragment(a, b) groups several components into one with no wrapping element.
Use it to put several components into one branch of rx.cond, rx.foreach's return value, or a function's return value.
With no wrapping div, the cell layout of the outer Flex or Grid stays as it is.
It leaves no element behind, so it can't take styles or events. Use rx.box if you need them.

← Previous

Layout · Aspect Ratio

Typography · Text

Get news about new lessons

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