React JointJS
React wrapper for JointJS: refer to their documentation to learn how to customize JointJS.
React JointJS aims at simplifying the integration with React by letting you render nodes and ports with React components.
Install
yarn add react.joint
Usage
API:
type Port = joint.dia.Element.Port & {
element: JSX.Element;
id: string;
size: { width: number; height: number };
};
type Node = joint.dia.Element.Attributes & {
element: JSX.Element;
type: string;
id: string;
size: { width: number; height: number };
position: { x: number; y: number };
ports: Array<Port>;
};
type Props = {
graph: joint.dia.Graph;
paperOptions: joint.dia.Paper.Options;
nodes: Array<Node>;
links: Array<joint.dia.Link>;
paperRef: (paper: joint.dia.Paper) => void;
};<ReactJointJS
nodes={nodes.map(node => ({
id: node.id,
position: {
x: node.x,
y: node.y
},
size: {
width: 100,
height: 130
},
element: <GraphNode id={node.id} />,
type: "MyNode",
ports: [
{
id: `${node.id}_1`,
element: <Port1 label="Out 1" />,
args: {
x: 20,
y: 70
},
size: {
width: 76,
height: 20
}
},
{
id: `${node.id}_2`,
element: <Port2 label="Out 2" />,
args: {
x: 20,
y: 100
},
size: {
width: 76
height: 20
}
},
{
id: `${node.id}_3`,
element: <div />, // invisible port
args: {
x: 8,
y: 80
},
size: {
width: 0,
height: 0
}
}
]
}))}
links={links.map(
link =>
new joint.shapes.standard.Link({
source: {
id: link.source,
port: `${link.source}_${Math.floor(Math.random() * 2) + 1}` // random port between 1 and 2
},
target: { id: link.target, port: `${link.target}_3` },
router: {
name: "manhattan",
args: {
padding: 10
}
},
connector: { name: "rounded" },
attrs: {
line: {
stroke: "#333333",
strokeWidth: 2
}
}
})
)}
paperOptions={{
width: graphSize.width + 200,
height: graphSize.height + 200,
gridSize: 10,
async: true
}}
graph={graph}
paperRef={paper => {
this.paper = paper; // save ref to "paper"
}}
/>Under the hood
React JointJS uses foreignObject and portals to render your React components inside the svg created and managed by JointJS.
