React JSX Component Node Style Demo

This demo presents the React Component node style that leverages JSX and the powerful data binding features of the React framework.

With the React Component Style, node visualizations are defined by SVG templates written with JSX, similar to the template styles that are included with the library. However, since the templates of this style can use JSX and the powerful data binding of React, complex requirements are more easy to realize.

Note that the implementation used here employs a runtime JSX compiler (Babel) that transforms the code to JavaScript which then gets evaluated for the purpose of the demo and interactivity. Real applications define the rendering function in JSX or TSX files and the compiler tool-chain performs the compilation at build time.

Things to Try

Change the JSX code for one or more nodes. Bind colors or text to properties in the tag. Then, apply the new template by pressing the button. Or modify the tag and see how the visualization changes.

JSX Node Render function

Tag Object