React Diagram Component
How to integrate custom diagramming into your React-based web application. Painlessly.
The open-source web application framework React is a popular choice among web developers. There exist many accompanying component frameworks that facilitate the build of a modern web application. Its component-based approach allows creating use case specific components easily. For example, wrapping yFiles for HTML in a React component, yields a graph visualization component with an easy to use interface, customizable visualization, and sophisticated layouts.
yFiles for HTML is a commercial programming library explicitly designed for diagram visualization. The built-in user input handling makes the diagram accessible with keyboard, mouse, or touch gestures. The diagram can be tailored to any domain with flexible style options. And its sophisticated layout algorithms easily create readable, pleasing, and informative networks.
React components typically use data binding to visualize business data that is associated with an element. The framework provides specific directives to bind data in templates easily.
These templates can be used to create dynamic, arbitrary element visualizations. For example, rendering node elements that are zoom-dependent to show the different detailed data:
In a component-based web application, data is usually passed to the component to create the diagram. Although yFiles for HTML can be directly attached to an asynchronous data provider, it is also possible to provide data objects (e.g., JSON) from which a diagram will be generated.
This allows defining an interface for the component that binds to the diagram data. Thus, all features of the yFiles diagramming library can be utilized on the data to create a perfectly tailored user experience.
Often, connected data does not contain positional information and relies on the user or the application to arrange the elements in a meaningful way.
yFiles’ sophisticated layout algorithms provide arrangements for many different use cases out of the box, each of which can be configured to match specific requirements.
yFiles for HTML comes with a React Sample Application that shows how to integrate yFiles for HTML in a React project by simply adding yFiles as npm module dependency. The source code of this application is available on the yWorks Github repository and part of the yFiles for HTML package.
Test the yFiles for HTML diagramming library with a 60-day, fully functional trial package. The recommended way to use yFiles for HTML in a React application is shown by the React source code examples that are part of that package.
Download a trial version of yFiles for HTML.
Navigate to the source directory of the React Sample Application or the React TypeScript Sample Application, respectively.
Inspect the sample application’s documentation and
copy its build configuration and its React sample components to your project or
adjust its source code to match your requirements.