Props

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

There are props that are shared between all components, but each component can also define its own props.

For example, the rx.image component has a src prop that specifies the URL of the image to display and an alt prop that specifies the alternate text for the image.

Check the docs for the component you are using to see what props are available and how they affect the component (see the rx.image reference page for example).

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!).

In the example above, the class_name prop of the rx.box component is assigned a list of class names. This means the rx.box component will be styled with the CSS classes class-name-1 and class-name-2.

In addition to component-specific props, most built-in components support a full range of style props. You can use any CSS property to style a component.

See the styling docs to learn more about customizing the appearance of your app.

Reflex apps define State classes that hold variables that can change over time.

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.

Try clicking the badge below to change its color.

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.