react-vis-ts

This repo is for react-vis-ts. Make sure to visit visjs.org for more info.

Live Demo

Installation:

1npm install react-vis-ts --save-dev

Usage :

Add Graph to your component:

Example 1:

1import React from 'react';
2import Graph from 'react-vis-ts';
3
4function DemoGraph_1() {
5  const graph = {
6    nodes: [
7      { id: 1, label: 'Node 1', title: 'node 1 tootip text' },
8      { id: 2, label: 'Node 2', title: 'node 2 tootip text' },
9      { id: 3, label: 'Node 3', title: 'node 3 tootip text' },
10      { id: 4, label: 'Node 4', title: 'node 4 tootip text' },
11      { id: 5, label: 'Node 5', title: 'node 5 tootip text' },
12    ],
13    edges: [
14      { from: 1, to: 2 },
15      { from: 1, to: 3 },
16      { from: 2, to: 4 },
17      { from: 2, to: 5 },
18    ],
19  };
20  const options = {
21    layout: {
22      hierarchical: false,
23    },
24    nodes: {
25      widthConstraint: { minimum: 50 },
26    },
27    edges: {
28      color: '#000000',
29      // length: "200",
30      smooth: { enabled: true, type: 'dynamic' },
31    },
32  };
33  return <Graph graph={graph} options={options} style={{ height: '640px' }} />;
34}
35export default DemoGraph_1;

Example 2:

1import React, { useState } from 'react';
2import Graph from 'react-vis-ts';
3
4function DemoGraph_2() {
5  const [graph, setGraph] = useState({
6    nodes: [
7      { id: 1, label: 'Node 1' },
8      { id: 2, label: 'Node 2' },
9      { id: 3, label: 'Node 3' },
10      { id: 4, label: 'Node 4' },
11      { id: 5, label: 'Node 5' },
12    ],
13    edges: [
14      { from: 1, to: 2 },
15      { from: 1, to: 3 },
16      { from: 2, to: 4 },
17      { from: 2, to: 5 },
18    ],
19  });
20  const [selectedNode, setSelectedNode] = useState<number | undefined>(undefined);
21  const createNode = (x: number, y: number, nodeId: number | undefined) => {
22    if (nodeId === undefined) {
23      alert('Please select a node.');
24      return;
25    }
26    setGraph(({ nodes, edges }) => {
27      const id = nodes.length + 1;
28      const from = nodeId;
29      const node = { id, label: `Node ${id}`, x, y };
30      const edge = { from, to: id, label: 'added' };
31      return {
32        counter: id,
33        nodes: [...nodes, node],
34        edges: [...edges, edge],
35      };
36    });
37  };
38  const events = {
39    // The underlined Network library doesn't provide types for events so
40    // we are forced to use any here.
41    select: (selected: any) => {
42      if (!selected.event.srcEvent.shiftKey) {
43        setSelectedNode((_prev) => selected.nodes[0]);
44      }
45    },
46    click: (properties: any) => {
47      if (properties.event.srcEvent.shiftKey) {
48        createNode(properties.pointer.canvas.x, properties.pointer.canvas.y, selectedNode);
49      }
50    },
51  };
52  const options = {
53    layout: {
54      hierarchical: false,
55    },
56    nodes: {
57      widthConstraint: { minimum: 50 },
58    },
59    edges: {
60      color: '#000000',
61      smooth: { enabled: true, type: 'dynamic' },
62    },
63  };
64  return <Graph graph={graph} options={options} events={events} style={{ height: '740px' }} />;
65}
66export default DemoGraph_2;