refactor(examples): rename Graph to ReactFlow

example/src/Basic/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -22,7 +22,7 @@ const BasicGraph = () => {
   const onConnect = (params) => setElements(els => addEdge(params, els));
 
   return (
-    <Graph
+    <ReactFlow
       elements={elements}
       onLoad={onLoad}
       onElementClick={onElementClick}

example/src/CustomNode/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import Graph, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
 
 import ColorSelectorNode from './ColorSelectorNode';
 
@@ -53,7 +53,7 @@ const CustomNodeGraph = () => {
   const onConnect = (params) => setElements(els => addEdge(params, els));
 
   return (
-    <Graph
+    <ReactFlow
       elements={elements}
       onElementClick={onElementClick}
       onElementsRemove={onElementsRemove}
@@ -79,7 +79,7 @@ const CustomNodeGraph = () => {
         }}
       />
       <Controls />
-    </Graph>
+    </ReactFlow>
   );
 }
 

example/src/Edges/index.js

@@ -16,7 +16,7 @@ const initialElements = [
   { id: '5', data: { label: 'Node 5' }, position: { x: 450, y: 400 } },
   { id: '6', type: 'output', data: { label: 'Output Node 5' }, position: { x: 250, y: 550 } },
   { id: '7', type: 'output', data: { label: 'Output Node 6' }, position: { x: 550, y: 550 } },
-  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge', labelBgStyle: { fillOpacity: 0.75 } },
+  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge' },
   { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
   { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
   { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },

example/src/Empty/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -22,7 +22,7 @@ const EmptyGraph = () => {
   };
 
   return (
-    <Graph
+    <ReactFlow
       elements={elements}
       onLoad={onLoad}
       onElementClick={onElementClick}
@@ -41,7 +41,7 @@ const EmptyGraph = () => {
     >
       add node
     </button>
-    </Graph>
+    </ReactFlow>
   );
 }
 

example/src/Inactive/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -18,7 +18,7 @@ const EmptyGraph = () => {
   };
 
   return (
-    <Graph
+    <ReactFlow
       elements={initialElements}
       style={{ width: '100%', height: '100%' }}
       backgroundType="lines"
@@ -39,7 +39,7 @@ const EmptyGraph = () => {
           />
         </label>
       </div>
-    </Graph>
+    </ReactFlow>
   );
 }
 

example/src/Rich/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onElementClick = element => console.log('click', element);
@@ -41,7 +41,7 @@ const RichGraph = () => {
   const onConnect = (params) => setElements(els => addEdge(params, els));
 
   return (
-    <Graph
+    <ReactFlow
       elements={elements}
       onElementClick={onElementClick}
       onElementsRemove={onElementsRemove}
@@ -73,7 +73,7 @@ const RichGraph = () => {
       >
         add node
       </button>
-    </Graph>
+    </ReactFlow>
   );
 }
 

example/src/Stress/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, MiniMap } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, MiniMap } from 'react-flow-renderer';
 import { getElements } from './utils';
 
 const onLoad = graph => {
@@ -17,7 +17,7 @@ const StressGraph = () => {
   const onConnect = (params) => setElements(els => addEdge(params, els));
 
   return (
-    <Graph
+    <ReactFlow
       elements={elements}
       onLoad={onLoad}
       onElementsRemove={onElementsRemove}
@@ -26,7 +26,7 @@ const StressGraph = () => {
       backgroundType="lines"
     >
       <MiniMap />
-    </Graph>
+    </ReactFlow>
   );
 }
 

example/src/index.js

@@ -20,7 +20,11 @@ const routes = [{
   path: '/basic',
   component: Basic,
   label: 'Basic'
-},{
+}, {
+  path: '/edges',
+  component: Edges,
+  label: 'Edges'
+}, {
   path: '/custom-node',
   component: CustomNode,
   label: 'CustomNode'
@@ -28,10 +32,6 @@ const routes = [{
   path: '/stress',
   component: Stress,
   label: 'Stress'
-}, {
-  path: '/edges',
-  component: Edges,
-  label: 'Edges'
 }, {
   path: '/empty',
   component: Empty