docs(readme): add react flow instance section

README.md

@@ -37,7 +37,7 @@ React Flow is a library for building node-based graphs. You can easily implement
 
 In order to make this library as flexible as possible we don’t do any state updates besides the positions. This means that you need to pass the functions to remove an element or connect nodes by yourself. You can implement your own ones or use the helper functions that come with the library.
 
-## Installation
+# Installation
 
 ```
 npm install react-flow-renderer
@@ -61,17 +61,17 @@ const elements = [
 const BasicFlow = () => <ReactFlow elements={elements} />;
 ```
 
-# ReactFlow Component Prop Types
+# React Flow Component Prop Types
 
 - `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)*
-- `onElementClick`: element click handler
-- `onElementsRemove`: element remove handler
-- `onNodeDragStart`: node drag start handler
-- `onNodeDragStop`: node drag stop handler
-- `onConnect`: connect handler
-- `onLoad`: editor load handler
-- `onMove`: move handler
-- `onSelectionChange`: fired when element selection changes
+- `onElementClick(element: Node | Edge)`: element click callback
+- `onElementsRemove(elements: Elements)`: element remove callback
+- `onNodeDragStart(node: Node)`: node drag start callback
+- `onNodeDragStop(node: Node)`: node drag stop callback
+- `onConnect({ source, target })`: connect callback
+- `onLoad(reactFlowInstance)`: editor load callback
+- `onMove()`: move callback
+- `onSelectionChange(elements: Elements)`: fired when element selection changes
 - `nodeTypes`: object with [node types](#node-types--custom-nodes)
 - `edgeTypes`: object with [edge types](#edge-types--custom-edges)
 - `style`: css properties
@@ -86,6 +86,43 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `isInteractive`: default: `true`. If the graph is not interactive you can't drag any nodes
 - `selectNodesOnDrag`: default: `true`
 
+## React Flow Instance
+
+You can receive a `reactFlowInstance` by using the `onLoad` callback:
+
+```javascript
+import React from 'react';
+import ReactFlow from 'react-flow-renderer';
+
+const onLoad = (reactFlowInstance) => {
+  reactFlowInstance.fitView();
+}
+
+const BasicFlow = () => <ReactFlow onLoad={onLoad} elements={[]} />;
+```
+
+`reactFlowInstance` has the following functions:
+
+### project
+
+Transforms pixel coordinates to the internal React Flow coordinate system
+
+`project = (position: XYPosition): XYPosition`
+
+### fitView
+
+Fits view port so that all nodes are visible
+
+`fitView = ({ padding }): void`
+
+### zoomIn
+
+`zoomIn = (): void`
+
+### zoomOut
+
+`zoomOut = (): void`
+
 # Nodes
 
 There are three different [node types](#node-types--custom-nodes) (`default`, `input`, `output`) you can use. The node types differ in the number and types of handles. An input node has only a source handle, a default node has a source and a target and an output node has only a target handle. You create nodes by adding them to the `elements` array of the React Flow component.
@@ -400,11 +437,6 @@ Returns elements array with added edge
 
 `addEdge = (edgeParams: Edge, elements: Elements): Elements`
 
-### project
-
-Transforms pixel coordinates to the internal React Flow coordinate system
-
-`project = (position: XYPosition): XYPosition`
 
 You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
 

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,