Custom component: Passing Dash components as html?

Dash Python
21

To my knowledge, circumventing React and modifying the DOM directly will only “work” until React performs a render operation, at which point the changes are overwritten. Hence, to achieve a stable (working) solution, I would recommend implementing a custom Dash component that wraps a React component, which provides desired functionality, instead.

22

the problem is providing my dash html in the content paramater. Im not sure how i can convert the data sent from dash server callback to a properly formated react element that the paramater needs to be

defaultLayout = {
  dockbox: {
    mode: 'horizontal',
    children: [
      {
        tabs: [
          {id: 'tab1', title: 'tab1', content: <div>Hello World</div>}
        ]
      }
    ]
  }
};
23

What if you json dumped your layout to dcc.stores and then had the rc-dock div be the only thing, then pull all the elements from the stores to the rc-dock children and tabs.

24

How would I convert that JSON then to a react component to pass to the new tab that expects ReactElement

can I use React.createElement?

25

Looks like you should be able to, yeah. Since the layout is broken into props and children, etc.

26

and how would the callbacks get registered from dash if i were to do this? i guess i would need to do some deep object creation by iterating over all of the props and creating a react element for each child element and prop too

1 Like
27

Even if i do create the object with React.createElement the callbacks are not firing

React.createElement(child.type, child.props);

is there another step of perhaps a dash internal function i can use to convert the JSON into React components that dash accepts?

28

To my knowledge, it is not possible to get callbacks working with the current version of Dash, when you create elements yourself.

29

:unamused: thats a pity. I really would love to wrap rc-dock in a custom component just need to pass it ReactElements (and obviously need callbacks to work)

30

Has anyone test this with pattern-matching callbacks?

31

I haven’t tested it, but I don’t believe it should make a difference. So far, the two designs I have used to enable callbacks have been to,

  • Construct components in Dash, and pass them via the children prop.
  • As part of the component implementation, write explicit bindings between React events and Dash component props.

I agree that I would be nice, if you could just target arbitrary elements (e.g. elements passed via other props than children, or even custom elements as you need), but to my knowledge, this is currently not possible in Dash.

32

Hi dales.
Have you tried using dash-lumino-components · PyPI ?
It works pretty well
However I cannot find a way to get the id of the current selected tab + it doesnt work properly with ddk.

33

I recall briefly looking at their library. What I recall is that it was designed as a full page dashboard and not as a component that I could drop at some nested location in my html structure. I am yet to find a library that has the functionality provided by rc-dock. Most of the other support resizing specific components and not the container layout which is what I like so much about RC-dock. Sibling components grow or shrink next to the resized container

34

Hi Emil, I have implemented MUI’s datatable as a custom Dash component and am currently rendering other Dash components in cells the same way as Dale described but can’t link them to callbacks since Dash doesn’t know about them, as you stated above.

You said that you wrote explicit bindings between React events and Dash component props, would you be able to elaborate on that or point me in the direction of code that does that?

Thanks!

35

Say that you create a component X (i.e. your MUI datatable), which will render a new component Y somehow (outside Dash). If you then want an event emitted by Y, say a click event, to trigger a callback, you would create a property “n_click” on X, subscripe to the click event from Y (from within the React code of X) and update the “n_clicks” prop (of X) from within that event handler.

If you then attach a callback in Dash to the “n_clicks” prop of X, this callback will be invoked when you click on Y. Does that make sense? :smiley:

Here is a not-so-simple example.

36

Yep that makes sense, thanks!