Unable to use React components within the node HTML

[PeterBowater]

HI Pierre,

Was hoping you could shed some light here. In the demo code you have this for the renderNode parameter of the TreeViz call:

renderNode={(node) => <div style="height:${node.settings.nodeHeight}px;display:flex;align-items:center;margin-left:12px">Node name: ${node.data.text_1}</div> }

Is there an accepted way to return a React component rather than constructing bare HTML?

If not, do you think it is possible it could be updated to do so?

Thanks very much,

Peter.

[PierreCapo]

Hello Peter, I realized yesterday that the treeviz-react wrapper is really broken. I really don't have time to fix it in the incoming weeks sadly, but I think maybe google how to wrap a VanillaJs component in a react app, because the vanilla treeviz module should work smoothly

[PeterBowater]

OK thanks Pierre, not to worry.

We'll explore other ways of incorporating, I'm sure we can work something out. If viable, I expect we will share it back to you if you wanted?

Thanks,

Peter

[PierreCapo]

Oh that would be awesome, please do @PeterBowater 😀

[phollaki]

Hey Guys! Did you find a solution for this or not yet? @PeterBowater @PierreCapo Is there a way to insert a React component like a Material ui icon to html template? For example something like this: result = <div style="height:${node.settings.nodeHeight}px;display:flex;align-items:center;margin-left:12px">Node name: ${node.data.text_1}${<Icon/>}</div>

[phollaki]

I found a solution for this problem. You have to import { renderToString } from "react-dom/server". After this you can create a constant for your component: const icon = renderToString(<AddIcon />);. And then you can use it in your HTML: ${icon}. Made an example in codesandbox if you would like to try. https://codesandbox.io/s/lingering-browser-iiqud?file=/src/App.js:526-570