✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Extending dash components

Dash
#1

The current documentation on plugins covers creating new Dash components from scratch nicely,

https://dash.plot.ly/plugins

Though i am not very familiar with JS, i was able to cook up a few simple ones myself (a go-to-link component, an image toggle element, …). Now, i am facing a scenario where one of the current dash components is close to what i need, but needs some modification. Hence i was thinking that the easiest way to accomplish my goal would be to extend that component and add/overrride functionality as needed.

Is there any documentation and/or examples available for this kind of use case? I guess i would need to import the dash core components somehow :slight_smile:

1 Like
#2

Hi @Emil,

That’s a good idea! I made an issue for your suggestion here: https://github.com/plotly/dash-docs/issues/719. If you end up developing a new functionality or fixing a bug, I’d encourage you to make a pull request on the relevant repository (e.g. dash-core-components).

#3

@wbrgss Thanks for creating the issue. Since i was not able to figure out any smart way to extend a dash component, i ended up with the following process,

  • Fork dash-core-components
  • Clone the repository and install dependencies as per README.md
  • Duplicate the .react.js file of the component which is to be extended in src/components and do the desired changes (including a new component name)
  • Add the new component in src/index.js
  • Add (any) custom css files to src/components/css
  • Bump version number in package.json to X.Y.Z
  • Run “npm run build” to build the new component(s)
  • Run “python setup.py sdist” to create a package .tar.gz file
  • Copy the .tar.gz file to the lib folder my other project(s)
  • Add ./lib/dash-core-components-X.Y.Z to requirements.txt of the other project(s)
  • Run “pip install -r requirements.txt” for the other project(s)

While this approach is relatively straight forward (and works), it has a few drawbacks

  • I duplicate all code of the component, which i am extending
  • I need to update and rebuild the whole dash-core-components library each time i make a change to my component and/or a new dash version is released

If anyone can come up with a cleaner solution, i am all ears :slight_smile:

1 Like