New Features
Python 3.12 is now supported
by masenf in https://github.com/reflex-dev/reflex/pull/2006
Next.js upgrade from 13 to 14
by Lendemor in https://github.com/reflex-dev/reflex/pull/2142
Clear Form using `reset_on_submit` prop
You can use the `reset_on_submit` on a form to reset form values to their original states after submitting the form. Simply set the value to True.
python
rx.form(
rx.input(id="text", placeholder="text"),
rx.button("Submit", type_="submit"),
reset_on_submit=True,
)
(by masenf in https://github.com/reflex-dev/reflex/pull/2012)
Forms support dynamic names.
- Dynamic refs / ids don't really work but you can use dynamic names instead
python
rx.form(
rx.vstack(
rx.input(name="name_input"),
rx.hstack(rx.pin_input(length=4, name="pin_input")),
rx.number_input(name="number_input"),
rx.checkbox(name="bool_input"),
rx.switch(name="bool_input2"),
rx.slider(name="slider_input"),
rx.range_slider(name="range_input"),
rx.radio_group(["option1", "option2"], name="radio_input"),
rx.select(["option1", "option2"], name="select_input"),
rx.text_area(name="text_area_input"),
rx.input(
name="debounce_input",
debounce_timeout=0,
on_change=rx.console_log,
),
rx.button("Submit", type_="submit"),
),
),
- Use `rx.Var.range` (similar to python’s `range` ) with `rx.foreach` to dynamically create form elements with dynamic names. `rx.Var.range(v1, v2, step)` takes in start, end and step values which should be integers or `Var` integers.
python
class State:
grid: int = 4
def handle_submit(self, form_data: dict):
print(form_data)
rx.form(
rx.responsive_grid(
rx.foreach(
rx.Var.range(State.grid),
lambda i: rx.foreach(
rx.Var.range(State.grid),
lambda j: rx.input(
name=f"grid_{i}_{j}",
placeholder=f"grid {i} {j}",
key=f"{i}_{j}",
width="4em",
),
),
),
columns=[State.grid],
),
rx.button("Submit", type_="submit"),
reset_on_submit=True,
on_submit=State.handle_submit,
),
New form-based code should prefer to use the `name` attribute to avoid the overhead of using refs for no specific gain (unless focus or value setting is required).
(by masenf in https://github.com/reflex-dev/reflex/pull/2012)
Improvements
- Assume secure protocol (wss://) and no port If the frontend is being accessed via `HTTPS` and the `API_URL` is either `localhost`, `0.0.0.0` or `::` and uses a non-secure protocol by masenf in https://github.com/reflex-dev/reflex/pull/2129
- Reduce Syntax highlighter footprint by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2037
- Lazy import modules in reflex by picklelo in https://github.com/reflex-dev/reflex/pull/2144
Doc fixups
- fix: grammatical errors & typo in Spanish [[readme.md](http://readme.md/)](http://readme.md/) by cllatser in https://github.com/reflex-dev/reflex/pull/2139
- docs: remove duplicated content in [[CONTRIBUTING.md](http://contributing.md/)](http://contributing.md/) by Jaspreet-singh-1032 in https://github.com/reflex-dev/reflex/pull/2152
- docs: revise typo in korean README and common CONTRIBUTING readme by young-hun-jo in https://github.com/reflex-dev/reflex/pull/2160
Bug Fixes
- fix an issue where some fields in `State.router.headers` were not getting updated by Lendemor in https://github.com/reflex-dev/reflex/pull/2133
- Resolve peer dependency conflict causing package-lock.json to relock on every run by ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2106
Other Changes
- Add benchmarking by Alek99 in https://github.com/reflex-dev/reflex/pull/2143
New Contributors
- cllatser made their first contribution in https://github.com/reflex-dev/reflex/pull/2130
- Jaspreet-singh-1032 made their first contribution in https://github.com/reflex-dev/reflex/pull/2152
- young-hun-jo made their first contribution in https://github.com/reflex-dev/reflex/pull/2160
**Full Changelog**: https://github.com/reflex-dev/reflex/compare/v0.3.2...0.3.3