React JSX Component Style Demo

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

With the React Component Style, node and label visualizations are defined by SVG or HTML component 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

Select nodes or labels in the view and inspect their templates and tag values in the text editors. Change the JSX code. 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.