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
+- `onElementClick(element: Node | Edge)`: element click callback
-- `onElementsRemove`: element remove handler
+- `onElementsRemove(elements: Elements)`: element remove callback
-- `onNodeDragStart`: node drag start handler
+- `onNodeDragStart(node: Node)`: node drag start callback
-- `onNodeDragStop`: node drag stop handler
+- `onNodeDragStop(node: Node)`: node drag stop callback
-- `onConnect`: connect handler
+- `onConnect({ source, target })`: connect callback
-- `onLoad`: editor load handler
+- `onLoad(reactFlowInstance)`: editor load callback
-- `onMove`: move handler
+- `onMove()`: move callback
-- `onSelectionChange`: fired when element selection changes
+- `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) => {
+const onLoad = reactFlowInstance => reactFlowInstance.fitView();
-  graph.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) => {
+const onLoad = (reactFlowInstance) => {
-  console.log('graph loaded:', graph);
+  console.log('graph loaded:', reactFlowInstance);
-  graph.fitView();
+  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 => {
+const onLoad = reactFlowInstance => reactFlowInstance.fitView();
-  console.log('graph loaded:', graph);
-  graph.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,