Fast components are the UI components that represent the input and outputs elements in a Fast Dash app. In fact, they are Dash components modified by adding a new
component_property attribute, in addition to a few other optional properties. Fast Dash provides a
Fastify function to transform Dash components into Fast components.
Fast Dash borrows the concept of
component_property from Dash.
component_property is the answer to the question - "Which property of a component should be assigned the value returned by the callback function?"
For example, if the first argument of a Fast Dash callback function is a
str and we want to represent this input using a component that allows users to enter text. Say we decide to use the
dbc.Input() Dash component. By reading the documentation of the component here, you'll realize that we must update the
value property of
dbc.Input() for it work as expected. And therefore, when defining a Fast component for this input we'd use
We use this design and the fact that Fast Dash allows using Fast components as type hints, in addition of standard Python data types, to write a simple app that takes text entered by users as the first input.
from fast_dash import Fastify, dbc text_input_component = Fastify(component=dbc.Input(), component_property="value") @fastdash def your_function(input_text: text_input_component, ...): ...
Note that Fast Dash offers prebuilt Fast Components for common use cases. Some of them are
Text: To allow entering input text
Slider: For integer inputs
Upload: Used to upload documents
UploadImage: Special case of
Upload used to upload images
Image: Used to display image variables returned by callback functions.
Graph: Display Plotly graphs
These can be easily imported into your script like this:
from fast_dash import Text, Slider, Upload, UploadImage, Image, Graph
Dash components vs Fast components
If you have used Dash, you will know that we have to specify a
component_property to Dash's
Output methods when defining our callback functions (during runtime). In other words, you can develop Dash UI before writing your callback functions.
On the contrary, Fast Dash infers components (when not specified) by studying the underlying callback function, particularly its type hints and default values. For that reason, it becomes essential for us to specify the
component_property before we define our callback function.