Render HTML Elements Clientside Callback

Dash Python
2

For anyone who ever goes down this road… You are able to access the underlying js libraries directly; however, I did not find any documentation so spent a lot of time interrogating the different libraries. You can then use React to render the components. Here’s a sample of what I did to keep everything client side. Truly this is only very useful if you using WebSockets or very expensive DOM operations. The issue is my DOM was not expensive but to render this server-side would require a POST back with the data. My dashboard is receiving over 100 events a second and that wasn’t going to work.

    let stock = data.stock;
    let time = data.time;
    let price = window.dash_html_components.H1({"children": data.price});
    let color = "success"
    if (data.diff.includes("-")) {
        color = "danger";
    }
    let diff = window.dash_bootstrap_components.Badge({
        "children": data.diff,
        "color": color,
        "className": "mr-1"
    })
    let content = window.dash_bootstrap_components.Row({
        "children": [window.dash_bootstrap_components.Col({
            "key": "price",
            "children": price
        }), window.dash_bootstrap_components.Col({
            "key": "diff",
            "children": diff
        })]
    });
    ReactDOM.render(content, document.getElementById(stock));