Are Compose-able components possible in Dash Python like they are in React?

Dash Python
1

Hello!

I’ve recently been working on a large dash/plotly app. As a developer, I also have extensive React experience and wanted to ask if Dash provided a mechanism to create custom components simply by composing existing components.

For example, in React/JSX, I can just create a new file containing a component (where the naming is my choosing, such as “AnimatedIconNavButton”) and I can easily define it with existing components, such as Divs, Images, links, and other promitives provided by React. Then all I have to do when using this custom component is import it and (if needed) provide it the correct props/information.

Does Dash/plotly have a similar mechanism if I want to encapsulate pieces of my existing python-defined UI tree into logical components? I notice that theres an existing post linking to a boilerplate repo, but this seems to make me think that I need to write my custom components in React and store them in a separate repository, which doesnt really work for the more code-organization oriented task that I plan to use this feature for.

Is there a way I can define custom components in my app that are based on existing components that I have imported already?

Hope this makes sense!

2

Maybe it would also help to add that currently we are using python functions to do this (i.e. a function that returns some component), but this approach feels less clean to me than being able to just nest/compose things in React

Could a similar thing be possible with python Classes maybe? like can I define a python class for my hypothetical AnimatedIconNavButton and be able to just import AnimatedIconNavButton followed by including AnimatedIconNavButton() somewhere in my subtree?

slowly realizing this is probably the best approach and that i probably didnt need to post any of this

3

Hi @spiced_popcorn and welcome to the Dash community!

You could check out Dash Hooks:

And All-in-one components:

Since you have extensive React experience - any chance on taking a quick look and chiming in on this issue for making custom Dash Mantine Components?

4

ah yeah this looks like essentialy what I needed, thanks!

5

“extensive” may have been poor word choice on my part haha, I’ve definitely played with React providers before, but it seems like, to my understanding, thats mostly just based on whether or not the consumer is within the subtree of the provider?

Attempting to use GenAI to get some inspiration for directions to potentially take, some interesting ideas that may be worth looking into include:

  • maybe theres something to do with how the JS is bundled that is somehow not excluding the plugin from bundling its own version of the provider library? (this is probably just my own lack of understanding of how DMC works under the hood)
  • Could the dmc.MantineProvider() be moved into its own library so that it can become a peer dependency of both the dash mantine core components, and also any plugins?

sharing these ideas here because they make sense to me, but im not confident enough that I know react this deeply, so i dont want to create too much unnecessary chatter on the github issue. Happy to repost some or all of this on the issue if you think its helpful!

6

Thanks for taking the time to look at the issue! I’ll check out both your suggestions :slight_smile: