Reflex v0.6.0
New features and improvements in Reflex v0.6.0
Alek Petuskey
·
Reflex v0.6.0 is here! In this blog post, we’ll go over all the major improvements and changes since v0.5.0.
Decentralized Var Operations
Vars are any fields in your app that may change over time. Var operations transform the placeholder representation of the value on the frontend and provide a way to perform basic operations on the Var without having to define a computed var.
In this release, we reworked vars and made var operations more extensible. These changes make vars more stable and easier to work with along with adding more type safety.
To an end Reflex user, there is no visible change and it should be backward compatible with previous versions. For more information on vars and var operations see the var system docs.
Consistent theming
Reflex now supports a consistent theming system across all core components. More information can be found here. Apps can now be configured with a theme object that can change the appearance through the props background, accent color, gray color, and scaling factor.
app = rx.App( theme=rx.theme( appearance="light", has_background=True, radius="large", accent_color="teal", ) )
Graphing improvements
We significantly improved our graphing components. Our core components now inherit the app theme and are fully customizable. Additionally the charts can be made responsive to the window size by setting width to a percentage.
rx.vstack(
rx.recharts.composed_chart(
rx.recharts.area(data_key="uv"),
rx.recharts.bar(data_key="amt", bar_size=20),
rx.recharts.line(
data_key="pv",
type_="monotone",
),
rx.recharts.x_axis(data_key="name"),
rx.recharts.y_axis(),
rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
rx.recharts.graphing_tooltip(),
data=data,
height=250,
width="100%",
),
width="100%",
)
Responsive support for style props
Reflex now comes with configurable responsive breakpoints for all style props. If you change the window size the component will update to match the new breakpoint, see the example below.
rx.badge(
"Hello World",
color="black",
background_color=rx.breakpoints(
initial="pink",
sm="lime",
md="sky",
lg="yellow",
),
)
More information can be found here.
DiskStateManager to maintain state between reloads
When saving a file Reflex now uses a DiskStateManager to maintain state between reloads. When a file is saved the state is written to the disk and when a file is reloaded the state is read from the disk. This means that the state is preserved across reloads and you don't lose your application state during a 'reflex run'.
The application state is reset when you stop a 'reflex run' and start it again.
Moved Chakra to third party
Since moving our core components to Radix we have now moved Chakra into it's own 3rd party pip package. This means that we no longer bundle Chakra with Reflex. Instead you can install it seperately.
pip install reflex-chakra
You can access chakra components through the reflex_chakra
namespace like so:
import reflex_chakra as rc def index() -> rx.Component: return rc.button("Hello World")
What's next on the open source roadmap
To see what is coming next make sure to check out our roadmap.