42 lines
1.3 KiB
Markdown
42 lines
1.3 KiB
Markdown
```python exec
|
|
import reflex as rx
|
|
|
|
from pcweb.pages.docs import vars
|
|
```
|
|
|
|
# Custom Vars
|
|
|
|
As mentioned in the [vars page]({vars.base_vars.path}), Reflex vars must be JSON serializable.
|
|
|
|
This means we can support any Python primitive types, as well as lists, dicts, and tuples. However, you can also create more complex var types by inheriting from `rx.Base`.
|
|
|
|
## Defining a Type
|
|
|
|
In this example, we will create a custom var type for storing translations.
|
|
|
|
Once defined, we can use it as a state var, and reference it from within a component.
|
|
|
|
```python demo exec
|
|
import googletrans
|
|
|
|
class Translation(rx.Base):
|
|
original_text: str
|
|
translated_text: str
|
|
|
|
class TranslationState(rx.State):
|
|
input_text: str = "Hola Mundo"
|
|
current_translation: Translation = Translation(original_text="", translated_text="")
|
|
|
|
def translate(self):
|
|
text = googletrans.Translator().translate(self.input_text, dest="en").text
|
|
self.current_translation = Translation(original_text=self.input_text, translated_text=text)
|
|
|
|
|
|
def translation_example():
|
|
return rx.vstack(
|
|
rx.chakra.input(on_blur=TranslationState.set_input_text, default_value=TranslationState.input_text, placeholder="Text to translate..."),
|
|
rx.button("Translate", on_click=TranslationState.translate),
|
|
rx.text(TranslationState.current_translation.translated_text),
|
|
)
|
|
```
|