React Integration

The jsPlumb Toolkit has several components to assist you in integrating with React. This page provides an overview of the available components;
for a look at these components in use, see the React Integration demo documentation. The jsPlumb Toolkit is known to work
with versions 15.X.X and 16.X.X of React.

Setup

Previous versions of the React integration focused on the JsPlumbToolkitComponent, which created an instance
of the Toolkit internally and then a Surface widget to sit on top of it. That component is now deprecated in favour of
the JsPlumbToolkitSurfaceComponent, which expects that you have "manually" created an instance of the Toolkit.

This is an outline of the main component used in the React integration demonstration:

We create an instance of the Toolkit in the component's constructor, which we then inject into
the JsPlumbToolkitSurfaceComponent, along with renderParams and the view.

ControlsComponent is something built for this demonstration, to handle zoom/selection of nodes. DatasetComponent is also part of this demonstration - it's
a React version of the dataset view you may have seen on other demonstrations.

As with the Miniview component, this component needs a reference to a JsPlumbToolkitSurfaceComponent.

Attributes

selector A valid CSS3 selector identifying descendant nodes that are to be configured as draggable/droppables.

typeExtractor A Function that, given some DOM element, can return the type of the Node/Group the element represents. In this
example, our typeExtractor function would return the value of the data-node-type attribute. Optional.

dataGenerator Not shown in our example, this optional Function can be used to provide default data for some Node/Group type. Optional.

surface The JsPlumbToolkitSurfaceComponent to which to attach the Palette component.

You must extend BaseNodeComponent in the components you use to render nodes.

Mapping to a type

You map components to node/group types in the view. Here's the nodes section from the view in the Angular Flowchart Builder application:

this.view={nodes:{"start":{component:StartComponent},"selectable":{events:{tap:(params)=>{this.toolkit.toggleSelection(params.node);}}},"question":{parent:"selectable",component:QuestionComponent},"action":{parent:"selectable",component:ActionComponent},"output":{parent:"selectable",component:OutputComponent}},// There are two edge types defined - 'yes' and 'no', sharing a common// parent.edges:{...}}