A few years ago, when i started using Dash, I wanted to do bidirectional component synchronization. For me, the need has arisen multiple times since then, but I never found a good solution.
To keep the functionality compatible with the standard Dash library, I have encapsulated it in a
Sync component, which has the ability to synchronize properties of it’s descendants. As an example, consider the follow code,
import dash import dash_core_components as dcc from dash_extensions import Sync app = dash.Dash() app.layout = Sync([dcc.Input(id="input", value=50), dcc.Slider(id="slider", min=0, max=100, value=50)], circles=[[dict(id="input", prop="value", get="parseFloat"), dict(id="slider", prop="value")]]) if __name__ == '__main__': app.run_server()
which keeps a slider and a input in sync (on the client side, without using callbacks),
In the current syntax, the synchronization is specified as a list of dependency
circles. Each circle is a list of dicts holding (component_id, component_property) specifying what properties to target. In addition a get (used to parse a value before it’s sent to other components) and/or set (used to transform a value before it’s set) function can be passed.
Does this syntax make sense? Do you have any ideas for improvement(s)?