Problems integrating the Vis network with React

Question

Does anyone here use or have used Vis.js in any project? I'm trying to integrate Vis-network with React, and I even managed to, but I can't manipulate it in any way.

In the examples provided by Vis.js itself, they use the javascript code within the same html page to generate the canvas. As I'm in React, I created a VisNetwork component, and called it in App.js to test it. I even managed to generate the image, it really appeared, but I can't manipulate it.

For example, the canvas area of ​​the example is being 600x400 (example link), but the canvas area generated by React is being 500x150. Through App.css I was able to change the width that used 100% before, but the height could not be manipulated. Anyway, I'll leave the code here.

network.js

import React, { Component, createRef } from "react";
import { DataSet, Network } from 'vis-network/standalone/umd/vis-network.min';

// Create an array with nodes
const nodes = new DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
]);

// Create an array with edges
const edges = new DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
]);

// Provide the data in the vis format
const data = {
  nodes: nodes,
  edges: edges
};

const options = {
    autoResize: true,
    height: '100%',
    width: '100%'
};

// Initialize your network!
class VisNetwork extends Component {
  constructor() {
    super();
    this.network = {};
    this.appRef = createRef();
  }

  componentDidMount() {
    this.network = new Network(this.appRef.current, data, options);
  }

  render() {
    return (
      <div ref={this.appRef} />
    );
  }
}

export default VisNetwork;

In App.js, I imported VisNetwork and called it inside the div:

import React from 'react';
import './App.css';
import VisNetwork from './network';

function App() {
  return (
    <div className="App">
      <VisNetwork />
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
  width:500px;
  height:500px;
  border:solid;
  background-color:white;
}

Please do not negative this post without responding. It harm rather than helps. Thanks.

Answer 1

Another way to solve this is create a constant that takes the height size of the DOM and set the constant to the height of options.

const myHeight = Math.round(parseInt(window.innerHeight) * 0.7) + 'px';

const options = {
    autoResize: true,
    height: myHeight
};

Thus, it is possible to control the percentage.

Answer 2

I suggest the reason that set option width and height 100% not working is that the network is attaching on a div which height and width is not defined, so you could try the code below:

const options = {
  autoResize: ture,
  height: '100%',
  width: '100%'
};

// Initialize your network!
class VisNetwork extends Component {
  constructor() {
  super();
  this.network = {};
  this.appRef = createRef();
}

componentDidMount() {
  this.network = new Network(this.appRef.current, data, options);

}




render() {

let containerStyle = {  //define container width and height.
   width:"500px",
   height:"500px",  
}

return (
   <div style={containerStyle} ref={this.appRef} />   
);
}
}

export default VisNetwork;

If code above doesn't work , I would suggest use this.network.setSize(width, height) to force the canvas to change.