docs(readme): add react flow instance section

example/src/Basic/index.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
-const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
+const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance);
 const onElementClick = element => console.log('click', element);
 
 const initialElements = [

example/src/CustomNode/index.js

@@ -6,7 +6,7 @@ import ColorSelectorNode from './ColorSelectorNode';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onElementClick = element => console.log('click', element);
-const onLoad = (graph) => console.log('graph loaded:', graph);
+const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance);
 
 const initBgColor = '#f0e742';
 

example/src/Edges/index.js

@@ -6,7 +6,7 @@ import CustomEdge from './CustomEdge';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onElementClick = element => console.log('click', element);
-const onLoad = (graph) => graph.fitView();
+const onLoad = reactFlowInstance => reactFlowInstance.fitView();
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },

example/src/Empty/index.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
-const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
+const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance);
 const onElementClick = element => console.log('click', element);
 
 const EmptyFlow = () => {

example/src/Horizontal/index.js

@@ -2,9 +2,7 @@ import React, { useState } from 'react';
 
 import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
 
-const onLoad = (graph) => {
-  graph.fitView();
-};
+const onLoad = reactFlowInstance => reactFlowInstance.fitView();
 
 const initialElements = [
   { id: '1', sourcePosition: 'right', type: 'input', className: 'dark-node', data: { label: 'Input' }, position: { x: 0, y: 80 } },

example/src/Overview/index.js

@@ -6,9 +6,9 @@ const onNodeDragStart = node => console.log('drag start', node);
 const onNodeDragStop = node => console.log('drag stop', node);
 const onElementClick = element => console.log('click', element);
 const onSelectionChange = elements => console.log('selection change', elements);
-const onLoad = (graph) => {
-  console.log('graph loaded:', graph);
-  graph.fitView();
+const onLoad = (reactFlowInstance) => {
+  console.log('graph loaded:', reactFlowInstance);
+  reactFlowInstance.fitView();
 };
 
 const initialElements = [

example/src/Stress/index.js

@@ -3,10 +3,7 @@ import React, { useState } from 'react';
 import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
 import { getElements } from './utils';
 
-const onLoad = graph => {
-  console.log('graph loaded:', graph);
-  graph.fitView();
-};
+const onLoad = reactFlowInstance => reactFlowInstance.fitView();
 
 const initialElements = getElements(10, 10);
 

example/src/Validation/index.js

@@ -47,7 +47,7 @@ const HorizontalFlow = () => {
       elements={elements}
       onConnect={onConnect}
       selectNodesOnDrag={false}
-      onLoad={reactflowInstance => reactflowInstance.fitView()}
+      onLoad={reactFlowInstance => reactFlowInstance.fitView()}
       className="validationflow"
       nodeTypes={{
         custominput: CustomInput,