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
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).
@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
Nothing in particular yet, I have a few ideas but was wondering how to best approach it. And am too novice with javascript to have anything better than you do
If you are still looking for the “solution”, check this answer.
The idea is to add the library to your dependencies and give an alias to the component you are extending. I put a simple example there using a Button from the dash-bootstrap-components.
