DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

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.

Imports

The React integration ships in a separate tar - jsplumbtoolkit-react.tgz. Add it to your package.json alongside the Toolkit dependency declaration:

 {
    ...
    "dependencies":{
        ...
        "jsplumbtoolkit":"file:path/to/jsplumbtoolkit.tgz",
        "jsplumbtoolkit-react":"file:path/to/jsplumbtoolkit-react.tgz"
        ...
    }
    ...
}

TOP


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:

class DemoComponent extends React.Component {

    constructor(props) {
        super(props);
        this.toolkit = jsPlumbToolkit.newInstance({
            ...
        });

        this.view = {
            ...
        }

        this.renderParams = {
            ...
        }
    }

    render() {
        return <div style=>
                    <JsPlumbToolkitSurfaceComponent renderParams={this.renderParams} toolkit={this.toolkit} view={this.view} ref={ (c) => this.surface = c.surface }/>
                    <ControlsComponent ref={(c) => this.controls = c }/>
                    <DatasetComponent ref={(d) => this.dataset = d }/>
                    <div className="miniview"/>                        
                </div>
    }

}

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.

jsPlumb Components

React is component based. The Toolkit offers 3 components:

JsPlumbToolkitSurfaceComponent

<JsPlumbToolkitSurfaceComponent renderParams={this.renderParams} view={this.view} toolkit={this.toolkit}/>
Attributes
  • toolkit A reference to an instance of the Toolkit. Required.
  • renderParams Parameters to pass in to the constructor of the Surface widget. Optional, but you'll probably supply something here.
  • view View parameters. Views are discussed here. Again, optional, but you'll probably want to supply something.

TOP


JsPlumbToolkitMiniviewComponent

Provides a Miniview that can be attached to some Surface component.

Example
import JsPlumbToolkitMiniviewComponent from 'jsplumbtoolkit-react';

const miniview = ReactDOM.render(
    <JsPlumbToolkitMiniviewComponent surface={JsPlumbToolkitSurfaceComponent}/>, document.querySelector(".miniview")
)
Attributes
  • surface The JsPlumbToolkitSurfaceComponent to which to attach the Miniview component.

TOP


JsPlumbToolkitPaletteComponent

Provides a means to implement drag/drop of new Nodes/Groups onto your Surface. This component is abstract; you are expected to provide the render method.

Example

First, declare your subclass and provide the render method:

import JsPlumbToolkitPaletteComponent from 'jsplumbtoolkit-react';

class MyPalette extends JsPlumbToolkitPaletteComponent {

  render() {
    return <div className="someClass">
                <ul>
                    <li data-node-type="foo">FOO</li>
                    <li data-node-type="bar">BAR</li>
                </ul>
           </div>
  }
}

Then create one in your app:

const typeExtractor = function(el) { return el.getAttribute("data-node-type") };
const dataGenerator = function (type) { return { w:120, h:80 }; };
const nodePaletteElement = document.querySelector(".parentOfNodePalette")

const nodePalette = ReactDOM.render(
        <MyPalette surface={this.surface} selector={"li"} typeExtractor={typeExtractor} 
            container={nodePaletteElement} dataGenerator={dataGenerator}/>
, nodePaletteElement);

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.

For further reading on the concept of Palettes, see this page .

TOP


JsPlumbToolkitComponent

THIS COMPONENT IS DEPRECATED

The preferred method of working with jsPlumb and React now is to create an instance of the Toolkit somewhere in your code, and use JsPlumbSurfaceComponent to render it.

This is an element component that provides an instance of the Toolkit and a Surface widget to render the contents.

Example
import JsPlumbToolkitComponent from 'jsplumbtoolkit-react';

<JsPlumbToolkitComponent ref={ (t) => this.toolkit = t } url={"data/flowchart-1.json"} renderParams={renderParams} 
    toolkitParams={toolkitParams} view={view}/>
Attributes

All attributes are optional.

  • renderParams Parameters to pass in to the constructor of the Surface widget.
  • toolkitParams Parameters to pass in to the constructor of the Toolkit instance.
  • view View parameters. Views are discussed here.
  • ref This is an internal React attribute - it allows us, in this case, to retrieve the Toolkit component inside its parent.
  • url provide this if you wish to initialise the Toolkit with some data via a url.
  • data provide this if you wish to initialise the Toolkit with some data directly.
Accessing the Toolkit and Surface

This component makes its Toolkit and Surface instances available as properties. So if you used ReactDOM to render this, for example, you get a component that has toolkit and surface as properties:

const toolkitComponent = ReactDOM.render(<JsPlumbToolkitComponent ref={ (t) => this.toolkit=t } .../>, someElement)
const toolkit = toolkitComponent.toolkit
const surface = toolkitComponent.surface

TOP


Rendering Nodes and Groups

Each Node or Group in your UI is rendered as an individual component.

Definition

As an example, consider the component we use to render an Action node in the Flowchart builder demonstration:

import React from 'react';
import { BaseEditableComponent } from"./base-component.jsx";

/**
 * Component used to render an action node.
 */
export class ActionComponent extends BaseEditableComponent {

    constructor(props) {
        super(props)
    }

    render() {

        const obj = this.state;

        return <div style= className="flowchart-object flowchart-action">
            <div style=>
                <div className="node-edit node-action" onClick={this.edit.bind(this)}>
                    <i className="fa fa-pencil-square-o"/>
                </div>
                <div className="node-delete node-action" onClick={this.remove.bind(this)}>
                    <i className="fa fa-times"/>
                </div>
                <svg width={obj.w} height={obj.h}>
                    <rect x={0} y={0} width={obj.w} height={obj.h} className="outer drag-start"/>
                    <rect x={10} y={10} width={obj.w-20} height={obj.h-20} className="inner"/>
                    <text textAnchor="middle" x={obj.w/2} y={obj.h/2} dominantBaseline="central">{obj.text}</text>
                </svg>
            </div>
            <jtk-target port-type="target"/>
            <jtk-source port-type="source" filter=".outer"/>
        </div>
    }
}

Here, BaseEditableComponent is common for all nodes, and offers a few basic methods like node edit/remove. The class declaration looks like this:

import { BaseNodeComponent }  from 'jsplumbtoolkit-react';
import { Dialogs } from 'jsplumbtoolkit';

export class BaseEditableComponent extends BaseNodeComponent {

    ...
}

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: {
        ...
    }
}

TOP