Props
Props modify the behavior and appearance of a component. They are passed in as keyword arguments to the component function.
Component Props
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.
Reflex has a wide selection of built-in components to get you started quickly.
HTML Props
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",
],
)
Binding Props to State
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.
Optional: Learn all about State first.
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.