Support fully managed integration with React. Willing to contribute.

[coreymunn3]

Is your feature request related to a problem? Please describe.
There seem to be alot of people having issues integrating this wonderful library with React components, see #85 and #100.

Describe the solution you'd like
I think this library could be made better by enabling react users to import a wrapper component that makes the integration simpler. It's not too hard, and in fact I would be happy to contribute to this. Maybe this should be a different library altogether, though. Please inform if this already exists or has already been created somewhere, but I could not find many if any free React sunburst chart libraries, and no other react sunburst libraries by the same creator.

This is how we would use this new component.

import ReactSunburst from 'sunburst-chart'
<SunburstChart  {...props that can override stated defaults} /> 

and the rest would happen automagically so that the user can focus on just feeding it some data.

Describe alternatives you've considered
I've created a custom implementation of this idea in a private repo

Additional context
none, at the moment. can provide code sandbox to illustrate how this component would work, if requested. Otherwise I'll just keep using my own custom implementation.

[vasturiano]

@coreymunn3 thanks for reaching out and for your suggestion.

If there is demand I think it's a good idea to have a ready packaged React binding of this component. But it should be indeed a separate library.

It can also be implemented with minimal code using react-kapsule.

Feel free to go ahead and create such a wrapper in a separate module, no problem at all. 👍

[nattzp]

Has this been done? Would love to use the component

[coreymunn3]

Hey @nattzp this has not been done, I.e. actually implemented in the library. I got busy and completely forgot about this! but Here's a code sandbox that should help you get started. Unfortunately the colors don't seem to be working here (though they do on my project locally). Don't have time to figure out why! Also, I was using MUI styles in my project so it shows up in the sandbox, but obviously you wouldn't use MUI styles unless you were using MUI already.

Hope this helps

[vasturiano]

@nattzp here it is, react bindings for this component. Full feature parity. Still warm. 🍞 🔥

👉 https://github.com/vasturiano/react-sunburst-chart

[nattzp]

@vasturiano Thank you! I tried using this in my project, but there seems to be an issue when using Next. I thought it was because of server side rendering, but when using client or trying with useffect its still not working. Do you know if the component is compatible with next?

[vasturiano]

@nattzp it should work with NextJS I believe. Here's a sandbox of if being used in Next:
https://codesandbox.io/p/devbox/react-sunburst-2zd88z

If you're experiencing some problem, the best is if you open a new issue in the react-sunburst-chart repo and include a reproducing sandbox example.