110 lines
3.3 KiB
Markdown
110 lines
3.3 KiB
Markdown
```python exec
|
|
import reflex as rx
|
|
from typing import Any
|
|
from pcweb.pages.docs import state
|
|
```
|
|
|
|
## Declaring Vars
|
|
|
|
As seen in our [state section]({state.overview.path}), we can use `rx.Var` to define state variables in our Reflex apps.
|
|
|
|
When wrapping your own react components, you can use `rx.Var` to define props for your component. In the example below, we define a `color` prop for our `ColorPicker` component.
|
|
|
|
```python
|
|
class ColorPicker(rx.Component):
|
|
library = "react-colorful"
|
|
tag = "HexColorPicker"
|
|
color: rx.Var[str]
|
|
```
|
|
|
|
However, vars can be more than just a sigle type. You var can be any combination of primitive types.
|
|
|
|
```python
|
|
class SomeComponent(rx.Component):
|
|
|
|
tag = "SomeComponent"
|
|
|
|
data: Var[List[Dict[str, Any]]]
|
|
```
|
|
|
|
Here we define a var that is a list of dictionaries. This is useful for when you want to pass in a list of data to your component.
|
|
|
|
## Serializing Vars
|
|
|
|
Sometimes you want to create a var that isn't a common primitive type. In this case, you can use the `serializer` to convert your var to a primitive type which can be stored in your state.
|
|
|
|
Here is an example of how we can serialize a plotly figure into a json which can be stored in our state.
|
|
|
|
```python
|
|
import json
|
|
from typing import Any, Dict, List
|
|
|
|
from reflex.components.component import NoSSRComponent
|
|
from reflex.utils.serializers import serializer
|
|
from reflex.vars import Var
|
|
|
|
try:
|
|
from plotly.graph_objects import Figure
|
|
except ImportError:
|
|
Figure = Any
|
|
|
|
class PlotlyLib(NoSSRComponent):
|
|
"""A component that wraps a plotly lib."""
|
|
|
|
library = "react-plotly.js@2.6.0"
|
|
|
|
lib_dependencies: List[str] = ["plotly.js@2.22.0"]
|
|
|
|
|
|
class Plotly(PlotlyLib):
|
|
"""Display a plotly graph."""
|
|
|
|
tag = "Plot"
|
|
|
|
is_default = True
|
|
|
|
# The figure to display. This can be a plotly figure or a plotly data json.
|
|
data: Var[Figure]
|
|
|
|
...
|
|
|
|
|
|
try:
|
|
from plotly.graph_objects import Figure
|
|
from plotly.io import to_json
|
|
|
|
@serializer
|
|
def serialize_figure(figure: Figure) -> list:
|
|
"""Serialize a plotly figure.
|
|
|
|
Args:
|
|
figure: The figure to serialize.
|
|
|
|
Returns:
|
|
The serialized figure.
|
|
"""
|
|
return json.loads(str(to_json(figure)))["data"]
|
|
|
|
except ImportError:
|
|
pass
|
|
```
|
|
|
|
## Event Triggers
|
|
|
|
As seen in our [events section](https://reflex.dev/docs/state/events/), we can use event triggers to handle events in our Reflex apps. When wrapping your own react components, you can use the `get_event_triggers` method to define event triggers for your component.
|
|
|
|
Sometimes these event trigger may take in arguments, for example, the `on_change` event trigger for the `HexColorPicker` component we saw in the [wrapping react section](https://reflex.dev/docs/wrapping-react/wrapping-react/). In this case, we can use a lambda function to pass in the event argument to the event trigger. The function associated with a trigger maps args for the javascript trigger to args that will be passed to the backend event handler function.
|
|
|
|
```python
|
|
class ColorPicker(rx.Component):
|
|
library = "react-colorful"
|
|
tag = "HexColorPicker"
|
|
color: rx.Var[str]
|
|
|
|
def get_event_triggers(self) -> dict[str, Any]:
|
|
return \{
|
|
**super().get_event_triggers(),
|
|
"on_change": lambda e0: [e0],
|
|
}
|
|
```
|