docs(site): add baisc example

2020-10-06 11:38:29 +02:00
parent 2fd2e2d2b7
commit c469957c58
4 changed files with 91 additions and 12 deletions
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import ReactFlow, {
+  removeElements,
+  addEdge,
+  ReactFlowProvider,
+} from 'react-flow-renderer';
+
+const initialElements = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Input Node' },
+    position: { x: 250, y: 25 },
+  },
+  {
+    id: '2',
+    data: { label: 'Another Node' },
+    position: { x: 100, y: 125 },
+  },
+];
+
+const BasicFlow = () => {
+  const [elements, setElements] = useState(initialElements);
+  const onElementsRemove = (elementsToRemove) =>
+    setElements((els) => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
+
+  return (
+    <div style={{ height: 300, border: '1px solid #EAEDF1', borderRadius: 5 }}>
+      <ReactFlowProvider>
+        <ReactFlow
+          elements={elements}
+          onElementsRemove={onElementsRemove}
+          onConnect={onConnect}
+        />
+      </ReactFlowProvider>
+    </div>
+  );
+};
+
+export default BasicFlow;