diff --git a/example/src/Rich/index.js b/example/src/Rich/index.js
index e1d2c691..3e5cb981 100644
--- a/example/src/Rich/index.js
+++ b/example/src/Rich/index.js
@@ -1,10 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow';
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 = (graph) => {
+ console.log('graph loaded:', graph);
+ graph.fitView();
+};
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Input Node 1' }, position: { x: 250, y: 5 } },
diff --git a/example/src/Stress/index.js b/example/src/Stress/index.js
new file mode 100644
index 00000000..bd53f4d9
--- /dev/null
+++ b/example/src/Stress/index.js
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+import Graph, { removeElements, addEdge, MiniMap } from 'react-flow';
+import { getElements } from './utils';
+
+const onLoad = graph => {
+ console.log('graph loaded:', graph);
+ graph.fitView();
+};
+
+const initialElements = getElements(10, 10);
+
+const StressGraph = () => {
+ const [elements, setElements] = useState(initialElements);
+ const onElementsRemove = (elementsToRemove) =>
+ setElements(els => removeElements(elementsToRemove, els));
+ const onConnect = (params) => setElements(els => addEdge(params, els));
+
+ return (
+
+
+
+ );
+}
+
+export default StressGraph;
diff --git a/example/src/Stress/utils.js b/example/src/Stress/utils.js
new file mode 100644
index 00000000..9a5de109
--- /dev/null
+++ b/example/src/Stress/utils.js
@@ -0,0 +1,28 @@
+export function getElements(xElements = 10, yElements = 10) {
+ const initialElements = [];
+ let nodeId = 1;
+ let recentNodeId = null;
+
+ for (let y = 0; y < yElements; y++) {
+ for (let x = 0; x < xElements; x++) {
+ const position = { x: x * 100, y: y * 50 };
+ const data = { label: `Node ${nodeId}` };
+ const node = {
+ id: nodeId.toString(),
+ style: { width: 50, fontSize: 11 },
+ data,
+ position,
+ };
+ initialElements.push(node);
+
+ if (recentNodeId && nodeId <= (xElements * yElements)) {
+ initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() });
+ }
+
+ recentNodeId = nodeId;
+ nodeId++;
+ }
+ }
+
+ return initialElements;
+}
diff --git a/example/src/index.js b/example/src/index.js
index 834fb888..0c275533 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -7,6 +7,7 @@ import Rich from './Rich';
import Basic from './Basic';
import Empty from './Empty';
import Inactive from './Inactive';
+import Stress from './Stress';
import './index.css';
@@ -25,6 +26,9 @@ ReactDOM.render((
+
+
+