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 easier 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 to examine their templates and tag values in the text editors.
-
Modify the JSX code, bind colors or text to tag properties, and click the button to
apply the new template to the selected item.
- Modify the tag and observe the visualization update.
Related Demos