network-vis

A react component to visualise a graph of nodes and edges for the given data. It is based on vis.js library. Currently, only string nodes are supported.

Installation

To install this Component, run npm install network-vis., Don't forget to install vis.js by running yarn add vis.

Usage

To use the component, In your react Application just do

import React, { Component } from 'react';
import Network from 'network-vis';
 
const containerStyle = {
  width: '100vh',
  height: '100vh',
}
 
class MyComponent extends Component {
 
    constructor(props) {
      super(props);
      this.state = {
        listOfNodes: [],
      }
    }
 
    async handleNodeClick(node) {
      try {
        const jsonPromise = await fetch('url for fetching array of strings for each clicked node');
        this.setState({
            listOfNodes: await jsonPromise.json(),
        });
      } catch (err) {
          console.log('failed');
      }
    }
 
    return (
      <div style={containerStyle}>
        <Network
            outgoing='true'
            root='MainNode'
            subNodes={this.state.listOfNodes}
            onNodeClick={this.handleNodeClick}
        />
      </div>
    );
 
}
 
export default MyComponent;