Merge branch 'master' into visjs-network-community

Author: openhousespec

README.md

@@ -21,40 +21,71 @@ This component takes three vis.js configuration objects as properties:
 # Usage
 
 ```javascript
-import Graph from 'react-graph-vis';
-
-const graph = {
-  nodes: [
-      {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'}
+import React from "react";
+import ReactDOM from "react-dom";
+import Graph from "react-graph-vis";
+
+import "./styles.css";
+// need to import the vis network css in order to show tooltip
+import "./network.css";
+
+function App() {
+  const graph = {
+    nodes: [
+      { id: 1, label: "Node 1", title: "node 1 tootip text" },
+      { id: 2, label: "Node 2", title: "node 2 tootip text" },
+      { id: 3, label: "Node 3", title: "node 3 tootip text" },
+      { id: 4, label: "Node 4", title: "node 4 tootip text" },
+      { id: 5, label: "Node 5", title: "node 5 tootip text" }
     ],
-  edges: [
-      {from: 1, to: 2},
-      {from: 1, to: 3},
-      {from: 2, to: 4},
-      {from: 2, to: 5}
+    edges: [
+      { from: 1, to: 2 },
+      { from: 1, to: 3 },
+      { from: 2, to: 4 },
+      { from: 2, to: 5 }
     ]
-};
+  };
 
-const options = {
+  const options = {
     layout: {
-        hierarchical: true
+      hierarchical: true
     },
     edges: {
-        color: "#000000"
-    }
-};
+      color: "#000000"
+    },
+    height: "500px"
+  };
 
-const events = {
+  const events = {
     select: function(event) {
-        var { nodes, edges } = event;
+      var { nodes, edges } = event;
     }
+  };
+  return (
+    <Graph
+      graph={graph}
+      options={options}
+      events={events}
+      getNetwork={network => {
+        //  if you want access to vis.js network api you can set the state in a parent component using this property
+      }}
+    />
+  );
 }
 
-React.render(<Graph graph={graph} options={options} events={events} />, document.body);
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
+
 ```
 
+
+
+
+
+
+
+
+
+
+
 You can also check out the demo in the [`example`](https://github.com/crubier/react-graph-vis/tree/master/example) folder.