diff --git a/README.md b/README.md
index 0d41108e..9dac10e3 100644
--- a/README.md
+++ b/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 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 = () => ;
- `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 = () => ;
+```
+
+`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.
diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js
index 56fb9029..da5cfe53 100644
--- a/example/src/Basic/index.js
+++ b/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 = [
diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js
index f2fc8fed..f65827c6 100644
--- a/example/src/CustomNode/index.js
+++ b/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';
diff --git a/example/src/Edges/index.js b/example/src/Edges/index.js
index 744af4d9..d6414365 100644
--- a/example/src/Edges/index.js
+++ b/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 } },
diff --git a/example/src/Empty/index.js b/example/src/Empty/index.js
index 3f907581..3cc91ce8 100644
--- a/example/src/Empty/index.js
+++ b/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 = () => {
diff --git a/example/src/Horizontal/index.js b/example/src/Horizontal/index.js
index d7fb9f68..e0968aa0 100644
--- a/example/src/Horizontal/index.js
+++ b/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 } },
diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js
index a36b5122..c17f2e7d 100644
--- a/example/src/Overview/index.js
+++ b/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 = [
diff --git a/example/src/Stress/index.js b/example/src/Stress/index.js
index d5382de7..7fecc9bb 100644
--- a/example/src/Stress/index.js
+++ b/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);
diff --git a/example/src/Validation/index.js b/example/src/Validation/index.js
index 77bf4d2e..47988e4c 100644
--- a/example/src/Validation/index.js
+++ b/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,