@unblocks/xyflow-react

A collection of utility functions and classes.

Install

1npm install @unblocks/xyflow-react

Example usage

1import { DagreFlow, createNode, createEdge, Graph } from '@unblocks/xyflow-react';
2
3function MyFlow() {
4  const graph = new Graph();
5  graph.addNodes([
6    createNode({
7      id: '1',
8      data: { label: 'Node 1' },
9    }),
10    createNode({
11      id: '2',
12      data: { label: 'Node 2' },
13    }),
14    createNode({
15      id: '3',
16      data: { label: 'Node 3' },
17    }),
18  ]);
19  graph.addEdges([
20    createEdge({
21      source: '1',
22      target: '2',
23    }),
24    createEdge({
25      source: '1',
26      target: '3',
27    }),
28  ]);
29
30  const DAGRE_OPTIONS: DagreOptions = { direction: 'TB', nodesep: 80 };
31
32  return (
33    <div style={{ width: '100%', height: '400px' }}>
34      <DagreFlow graph={graph} dagreOptions={DAGRE_OPTIONS} />
35    </div>
36  );
37}
38