* `rx.spinner` - new component for indeterminate loading
* `rx.skeleton` - new component for placeholder loading
* `loading` prop available for
* `rx.button`
* `rx.icon_button`
* `rx.spinner` and `rx.skeleton` -- use `loading=State.is_loading` instead of using `rx.cond`
* `rx.data_list` - new component for showing key value pairs
* `rx._x.progress` - experimental radix themes progress component, supports `duration` for indeterminate progress.
Radix 3.0 by Lendemor in https://github.com/reflex-dev/reflex/pull/3159
New Public API for wrapping Components
To make wrapping components easier and less error prone, the following functions should be overridden when wrapping components:
* `add_style` - return an `rx.style.Style` for default component styles
* `add_imports` - return a dictionary of `{"library-name0.5.0": {"tag1", "tag2", "tag3"}}` of required imports -- it will automatically be merged with the other component imports.
* `add_hooks` - return a list of javascript snippets that will go inside the component function -- it will be deduped automatically with any other hooks
* `add_custom_code` - return a list of javascript snippets that will go inside the module for each page the component is included in.
With these new methods, Reflex will internally call them for each parent class your component inherits from, so there is no need to call `super().add_*` or do any merging yourself.
* [REF-2523] Implement new public Component API by masenf in https://github.com/reflex-dev/reflex/pull/3203
* add_style api by Lendemor in https://github.com/reflex-dev/reflex/pull/3202
`State.setvar(var_name, value)`
A less magic version of the automatic `State.set_x` setter functions which accept the `var_name` as a string.
* [REF-2273] Implement .setvar special EventHandler by masenf in https://github.com/reflex-dev/reflex/pull/3163
Experimental Toast Component
python
def try_some_toast():
return rx.fragment(
rx.button("🥂", on_click=rx._x.toast.info("Cheers"), variant="outline"),
rx._x.toast.provider(),
)
* add toast component by Lendemor in https://github.com/reflex-dev/reflex/pull/3186
Generic `.throttle` and `.debounce` for all Event types
python
class ThrottleState(rx.State):
last_event: datetime.datetime = datetime.datetime.now()
def handle_mouse_move(self):
self.last_event = datetime.datetime.now()
def throttle_example():
return rx.box(
ThrottleState.last_event,
background_color=rx.color("red", 7),
width="500px",
height="500px",
on_mouse_move=ThrottleState.handle_mouse_move.throttle(500), one event every 500ms
)
* Implement `throttle` and `debounce` as event actions by masenf in https://github.com/reflex-dev/reflex/pull/3091
`rx.container` new prop `stack_children_full_width`
For a nice streamlit-like wide layout, use the following snippet:
python
def index():
return rx.container(
rx.vstack(content()),
stack_children_full_width=True,
)
This will cause all vstack/hstack children and most stack child components to have `width="100%"` automatically, which provides a nice aesthetic for many apps without applying CSS to individual components.
* [REF-2574] Default width for Stack (+children) and default padding for container by masenf in https://github.com/reflex-dev/reflex/pull/3104
Improvements
Unify on `ruff-format`
* ruff-format: unify Black with Ruff `v0.1` by Borda in https://github.com/reflex-dev/reflex/pull/2837
* sync ruff version in pyproject.toml with the precommit one by Lendemor in https://github.com/reflex-dev/reflex/pull/3150
Error Messages
* [REF-2636]Improve Error message for unsupported event trigger by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/3147
* prevent shadowing by Lendemor in https://github.com/reflex-dev/reflex/pull/3221
* Better error when a computed var has the same name as an existing state var.
* [REF-2643]Throw Errors for duplicate Routes by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/3155
* [REF-2622]Throw warning for incompatible uvicorn version on windows by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/3246
`rx.color_mode` changes
* `rx.color_mode.button` now has built in positioning prop for floating button
* IconButton for color_mode with nice default and a position props to control it by Lendemor in https://github.com/reflex-dev/reflex/pull/3165
Default style for `rx.upload`
* Refactor upload component and add styled upload component by Ifechukwu001 in https://github.com/reflex-dev/reflex/pull/3035
Use Alembic Batch Mode for `reflex db makemigrations`
This improves compatibility with the default sqlite database when re-typing columns.
* [REF-2658] Alembic should use batch mode for autogenerate by masenf in https://github.com/reflex-dev/reflex/pull/3223
README
* add color dalle code example by tgberkeley in https://github.com/reflex-dev/reflex/pull/3108
* a little correction in the "es" docs by JLDev-coder in https://github.com/reflex-dev/reflex/pull/3127
* Add Japanese README.md file by PeterYusuke in https://github.com/reflex-dev/reflex/pull/3234
Miscellaneous
* add default underline for links by Lendemor in https://github.com/reflex-dev/reflex/pull/3148
* Expose `color_scheme` on TabsTrigger by masenf in https://github.com/reflex-dev/reflex/pull/3112
* update blank template by Lendemor in https://github.com/reflex-dev/reflex/pull/3219
* Clean up config and app API by picklelo in https://github.com/reflex-dev/reflex/pull/3197
* Fixed unused kwargs in reflex.App by Snaipergelka in https://github.com/reflex-dev/reflex/pull/3170
* Now able to pass a custom `SocketIO` instance
Bugfixes
* [REF-2587] Ignore top-level theme appearance by masenf in https://github.com/reflex-dev/reflex/pull/3119
* avoids "flickering" when the top-level appearance differs from user selected mode
* [REF-2619] Re-init when the template is out of date by masenf in https://github.com/reflex-dev/reflex/pull/3121
* Fixed app name validation by Snaipergelka in https://github.com/reflex-dev/reflex/pull/3146
* extend rx.input allowed types by Lendemor in https://github.com/reflex-dev/reflex/pull/3149
* [REF-2682] Foreach over dict uses Tuple arg value by masenf in https://github.com/reflex-dev/reflex/pull/3160
* Improve nested foreach when dict has complex values
* Update CodeBlock class to accept rx.color in custom_style by khhan0130 in https://github.com/reflex-dev/reflex/pull/3168
* Windows `--frontend-only` fix ctrl + c by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/3181
* [REF-2676][REF-2751]Windows Skip ARM devices on bun install + Telemetry by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/3212
* icon_button: Icon size should be specified as int pixels, not str by masenf in https://github.com/reflex-dev/reflex/pull/3247
* copy background task marker by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3255
* Can now define background tasks in a state mixin
* Dynamic NoSSRComponent properly renders in prod mode when using State/event handlers
Dependencies
* Bump bun version to 1.1.5 by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/3176
* Windows Pin Bun version by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/3192
* Windows Pin Version followup (Use Windows Install Link) by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/3193
* [REF-2764] dep update 0.5.0 by masenf in https://github.com/reflex-dev/reflex/pull/3245
* gunicorn 22.0.0 with security fix
Other Changes
* separate DECORATED_PAGES per reflex app by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3102
* fix: args issue in `__init__` of App class by nautics889 in https://github.com/reflex-dev/reflex/pull/3141
* [REF-2620] Fallback to npm (not bun) by masenf in https://github.com/reflex-dev/reflex/pull/3138
* pin macos version for CI by Lendemor in https://github.com/reflex-dev/reflex/pull/3145
* [REF-2618] Send template info in init telemetry event by martinxu9 in https://github.com/reflex-dev/reflex/pull/3153
* Integration testing: Firefox compatibility by masenf in https://github.com/reflex-dev/reflex/pull/3162
* Improved get_attribute_access_type by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3156
* custom component install command to install current project in editable mode by martinxu9 in https://github.com/reflex-dev/reflex/pull/3200
* migrate deprecated redis.close to redis.aclose by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3199
* allow optional props with None default value by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3179
* Allow StatefulComponent to also be rendered via `__str__` by masenf in https://github.com/reflex-dev/reflex/pull/3211
* Improved get_attribute_access_type tests by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3180
* Improved implicit harness app names by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3237
* do not access state `__subclasses__`, prevent issues with AppHarness by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3143
* fix screenshot filenames by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3241
* minor test exp_not_equal fixup by benedikt-bartscher in https://github.com/reflex-dev/reflex/pull/3256
New Contributors
* nautics889 made their first contribution in https://github.com/reflex-dev/reflex/pull/3141
* Borda made their first contribution in https://github.com/reflex-dev/reflex/pull/2837
* Snaipergelka made their first contribution in https://github.com/reflex-dev/reflex/pull/3146
* Ifechukwu001 made their first contribution in https://github.com/reflex-dev/reflex/pull/3035
* JLDev-coder made their first contribution in https://github.com/reflex-dev/reflex/pull/3127
* khhan0130 made their first contribution in https://github.com/reflex-dev/reflex/pull/3168
**Full Changelog**: https://github.com/reflex-dev/reflex/compare/v0.4.9...v0.5.0