Props

Props modify the behavior and appearance of a component. They are passed in as keyword arguments to the component function.

Each component has props that are specific to that component. For example, the rx.avatar component has a fallback prop that sets the fallback of the avatar.

rx.avatar(fallback="JD")

Check the docs for the component you are using to see what props are available.

Components support many standard HTML properties as props. For example: the HTML id property is exposed directly as the prop id. The HTML className property is exposed as the prop class_name (note the Pythonic snake_casing!).

rx.box(
    "Hello World",
    id="box-id",
    class_name=[
        "class-name-1",
        "class-name-2",
    ],
)

Reflex apps can have a State that stores all variables that can change when the app is running, as well as the event handlers that can change those variables.

State may be modified in response to things like user input like clicking a button, or in response to events like loading a page.

State vars can be bound to component props, so that the UI always reflects the current state of the app.

You can set the value of a prop to a state var to make the component update when the var changes.

Try clicking the badge below to change its color.

class PropExampleState(rx.State):
    text: str = "Hello World"
    color: str = "red"

    def flip_color(self):
        if self.color == "red":
            self.color = "blue"
        else:
            self.color = "red"


def index():
    return rx.badge(
        PropExampleState.text,
        color_scheme=PropExampleState.color,
        on_click=PropExampleState.flip_color,
        font_size="1.5em",
        _hover={
            "cursor": "pointer",
        },
    )

In this example, the color_scheme prop is bound to the color state var.

When the flip_color event handler is called, the color var is updated, and the color_scheme prop is updated to match.