input field for currencies #2653
breidyfunes
started this conversation in
General
Replies: 1 comment 1 reply
-
I'd probably suggest wrapping a component like https://www.npmjs.com/package/react-currency-input-field I think this is too specialized to have in the core library. Here is some example code from typing import Any, Dict
import reflex as rx
class State(rx.State):
"""The app state."""
value: float = 1.99
def on_value_change(self, value, name, values):
print("on_value_change value: ", value)
self.value = value
def on_blur(self, value):
print("on_blur value: ", value)
def handle_submit(self, form_data):
print("handle_submit ", form_data, self.value)
class CurrencyInput(rx.Component):
library = "react-currency-input-field"
tag = "CurrencyInput"
is_default = True
default_value: rx.Var[float]
prefix: rx.Var[str]
suffix: rx.Var[str]
name: rx.Var[str]
def get_event_triggers(self) -> Dict[str, Any]:
return super().get_event_triggers() | {
"on_blur": lambda e: [e.target.value],
"on_value_change": lambda value, name, values: [value, name, values],
}
def index() -> rx.Component:
return rx.center(
rx.form(
rx.vstack(
rx.input(placeholder="Item Description", name="description"),
rx.hstack(
CurrencyInput.create(
name="amount",
default_value=State.value,
prefix="$",
suffix=" USD",
on_blur=State.on_blur,
on_value_change=State.on_value_change,
),
rx.text(State.value),
),
rx.button("Submit"),
align="center",
),
on_submit=State.handle_submit,
),
)
app = rx.App()
app.add_page(index) |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello, I am starting to study Reflex and I need a field to format currency type, for example $1,151,355.56:
Beta Was this translation helpful? Give feedback.
All reactions