Merge branch 'main' into feature/edgeUpdateWithMoreInfo-1961

2022-04-11 13:28:45 +02:00
parent 4d6c6ffc7d 2aeac16b02
commit c7fdfedd95
162 changed files with 34920 additions and 27001 deletions
@@ -1,80 +1,69 @@
-import React, { useState, MouseEvent } from 'react';
+import { MouseEvent } from 'react';

 import ReactFlow, {
-  removeElements,
-  addEdge,
-  isNode,
+  ReactFlowProvider,
  Background,
-  Elements,
  BackgroundVariant,
-  FlowElement,
  Node,
  Edge,
-  Connection,
-  OnLoadParams,
+  useReactFlow,
 } from 'react-flow-renderer';

 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
 ];

 const BasicFlow = () => {
-  const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Edge | Connection) => setElements((els) => addEdge(params, els));
-  const onLoad = (reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance);
+  const instance = useReactFlow();

  const updatePos = () => {
-    setElements((elms) => {
-      return elms.map((el) => {
-        if (isNode(el)) {
-          el.position = {
-            x: Math.random() * 400,
-            y: Math.random() * 400,
-          };
-        }
+    instance.setNodes((nodes) =>
+      nodes.map((node) => {
+        node.position = {
+          x: Math.random() * 400,
+          y: Math.random() * 400,
+        };

-        return el;
-      });
-    });
+        return node;
+      })
+    );
  };

-  const logToObject = () => console.log(rfInstance?.toObject());
-  const resetTransform = () => rfInstance?.setTransform({ x: 0, y: 0, zoom: 1 });
+  const logToObject = () => console.log(instance.toObject());
+  const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });

  const toggleClassnames = () => {
-    setElements((elms) => {
-      return elms.map((el) => {
-        if (isNode(el)) {
-          el.className = el.className === 'light' ? 'dark' : 'light';
-        }
+    instance.setNodes((nodes) =>
+      nodes.map((node) => {
+        node.className = node.className === 'light' ? 'dark' : 'light';

-        return el;
-      });
-    });
+        return node;
+      })
+    );
  };

  return (
    <ReactFlow
-      elements={elements}
-      onLoad={onLoad}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
-      onConnect={onConnect}
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      onNodeClick={onNodeClick}
      onNodeDragStop={onNodeDragStop}
      className="react-flow-basic-example"
      defaultZoom={1.5}
      minZoom={0.2}
      maxZoom={4}
+      fitView
    >
      <Background variant={BackgroundVariant.Lines} />

@@ -94,4 +83,10 @@ const BasicFlow = () => {
  );
 };

-export default BasicFlow;
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <BasicFlow />
+    </ReactFlowProvider>
+  );
+}
@@ -0,0 +1,98 @@
+import ReactFlow, {
+  useReactFlow,
+  Background,
+  BackgroundVariant,
+  Node,
+  Edge,
+  ReactFlowProvider,
+  useNodesState,
+  useEdgesState,
+} from 'react-flow-renderer';
+
+const defaultNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const defaultEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+const defaultEdgeOptions = {
+  animated: true,
+};
+
+// This is bad practise. You should either use a controlled or an uncontrolled component.
+// This is just an example for testing the API.
+const ControlledUncontrolled = () => {
+  const [nodes, , onNodesChange] = useNodesState(defaultNodes);
+  const [edges, , onEdgesChange] = useEdgesState(defaultEdges);
+  const instance = useReactFlow();
+
+  const logToObject = () => console.log(instance.toObject());
+  const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });
+
+  const updateNodePositions = () => {
+    instance.setNodes((nodes) =>
+      nodes.map((node) => {
+        node.position = {
+          x: Math.random() * 400,
+          y: Math.random() * 400,
+        };
+
+        return node;
+      })
+    );
+  };
+
+  const updateEdgeColors = () => {
+    instance.setEdges((edges) =>
+      edges.map((edge) => {
+        edge.style = {
+          stroke: '#ff5050',
+        };
+
+        return edge;
+      })
+    );
+  };
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      defaultNodes={defaultNodes}
+      defaultEdges={defaultEdges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      defaultEdgeOptions={defaultEdgeOptions}
+      fitView
+    >
+      <Background variant={BackgroundVariant.Lines} />
+
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+        <button onClick={resetTransform} style={{ marginRight: 5 }}>
+          reset transform
+        </button>
+        <button onClick={updateNodePositions} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={updateEdgeColors} style={{ marginRight: 5 }}>
+          red edges
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <ControlledUncontrolled />
+    </ReactFlowProvider>
+  );
+}
@@ -1,28 +1,31 @@
-import React, { useState } from 'react';
 import ReactFlow, {
-  removeElements,
+  Node,
  addEdge,
  Background,
  BackgroundVariant,
-  Elements,
  Connection,
  Edge,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

 import ConnectionLine from './ConnectionLine';

-const initialElements: Elements = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
+const initialNodes: Node[] = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
+const initialEdges: Edge[] = [];

 const ConnectionLineFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlow
-      elements={elements}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
      connectionLineComponent={ConnectionLine}
-      onElementsRemove={onElementsRemove}
      onConnect={onConnect}
    >
      <Background variant={BackgroundVariant.Lines} />
@@ -1,46 +1,49 @@
-import React, { useState, useEffect, MouseEvent } from 'react';
+import { useState, useEffect, MouseEvent } from 'react';
 import { ChangeEvent } from 'react';

 import ReactFlow, {
-  isEdge,
-  removeElements,
  addEdge,
  MiniMap,
  Controls,
  Node,
-  FlowElement,
-  OnLoadParams,
-  Elements,
+  ReactFlowInstance,
  Position,
  SnapGrid,
  Connection,
-  Edge,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

 import ColorSelectorNode from './ColorSelectorNode';

-const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance);
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
+  console.log('flow loaded:', reactFlowInstance);
+  reactFlowInstance.fitView();
+};
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

 const initBgColor = '#1A192B';

 const connectionLineStyle = { stroke: '#fff' };
 const snapGrid: SnapGrid = [16, 16];
+
 const nodeTypes = {
  selectorNode: ColorSelectorNode,
 };

 const CustomNodeFlow = () => {
-  const [elements, setElements] = useState<Elements>([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
  const [bgColor, setBgColor] = useState<string>(initBgColor);

  useEffect(() => {
    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-      setElements((els) =>
-        els.map((e) => {
-          if (isEdge(e) || e.id !== '2') {
-            return e;
+      setNodes((nds) =>
+        nds.map((node) => {
+          if (node.id !== '2') {
+            return node;
          }

          const color = event.target.value;
@@ -48,9 +51,9 @@ const CustomNodeFlow = () => {
          setBgColor(color);

          return {
-            ...e,
+            ...node,
            data: {
-              ...e.data,
+              ...node.data,
              color,
            },
          };
@@ -58,7 +61,7 @@ const CustomNodeFlow = () => {
      );
    };

-    setElements([
+    setNodes([
      {
        id: '1',
        type: 'input',
@@ -87,31 +90,35 @@ const CustomNodeFlow = () => {
        position: { x: 550, y: 100 },
        targetPosition: Position.Left,
      },
+    ]);

+    setEdges([
      { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
      { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
      { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
    ]);
  }, []);

-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) =>
-    setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els));
+  const onConnect = (connection: Connection) =>
+    setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds));

  return (
    <ReactFlow
-      elements={elements}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
      onConnect={onConnect}
      onNodeDragStop={onNodeDragStop}
      style={{ background: bgColor }}
-      onLoad={onLoad}
+      onInit={onInit}
      nodeTypes={nodeTypes}
      connectionLineStyle={connectionLineStyle}
      snapToGrid={true}
      snapGrid={snapGrid}
      defaultZoom={1.5}
+      fitView
    >
      <MiniMap
        nodeStrokeColor={(n: Node): string => {
@@ -132,4 +139,4 @@ const CustomNodeFlow = () => {
  );
 };

-export default CustomNodeFlow;
+export default CustomNodeFlow;
@@ -0,0 +1,83 @@
+import ReactFlow, {
+  useReactFlow,
+  Background,
+  BackgroundVariant,
+  Node,
+  Edge,
+  ReactFlowProvider,
+} from 'react-flow-renderer';
+
+const defaultNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const defaultEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+const defaultEdgeOptions = {
+  animated: true,
+};
+
+const DefaultNodes = () => {
+  const instance = useReactFlow();
+
+  const logToObject = () => console.log(instance.toObject());
+  const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });
+
+  const updateNodePositions = () => {
+    instance.setNodes((nodes) =>
+      nodes.map((node) => {
+        node.position = {
+          x: Math.random() * 400,
+          y: Math.random() * 400,
+        };
+
+        return node;
+      })
+    );
+  };
+
+  const updateEdgeColors = () => {
+    instance.setEdges((edges) =>
+      edges.map((edge) => {
+        edge.style = {
+          stroke: '#ff5050',
+        };
+
+        return edge;
+      })
+    );
+  };
+
+  return (
+    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} defaultEdgeOptions={defaultEdgeOptions} fitView>
+      <Background variant={BackgroundVariant.Lines} />
+
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+        <button onClick={resetTransform} style={{ marginRight: 5 }}>
+          reset transform
+        </button>
+        <button onClick={updateNodePositions} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={updateEdgeColors} style={{ marginRight: 5 }}>
+          red edges
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <DefaultNodes />
+    </ReactFlowProvider>
+  );
+}
@@ -1,4 +1,4 @@
-import ReactFlow from 'react-flow-renderer';
+import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';

 import DragHandleNode from './DragHandleNode';

@@ -6,16 +6,24 @@ const nodeTypes = {
  dragHandleNode: DragHandleNode,
 };

-const elements = [
+const initialNodes: Node[] = [
  {
    id: '2',
    type: 'dragHandleNode',
    dragHandle: '.custom-drag-handle',
    style: { border: '1px solid #ddd', padding: '20px 40px' },
    position: { x: 200, y: 200 },
+    data: null,
  },
 ];

-const DragHandleFlow = () => <ReactFlow elements={elements} nodeTypes={nodeTypes} />;
+const initialEdges: Edge[] = [];
+
+const DragHandleFlow = () => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges] = useEdgesState(initialEdges);
+
+  return <ReactFlow nodes={nodes} onNodesChange={onNodesChange} edges={edges} nodeTypes={nodeTypes} />;
+};

 export default DragHandleFlow;
@@ -1,22 +1,21 @@
-import React, { useState, DragEvent } from 'react';
+import { useState, DragEvent } from 'react';
 import ReactFlow, {
  ReactFlowProvider,
  addEdge,
-  removeElements,
  Controls,
-  OnLoadParams,
-  Elements,
+  ReactFlowInstance,
  Connection,
  Edge,
-  ElementId,
  Node,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

 import Sidebar from './Sidebar';

 import './dnd.css';

-const initialElements = [{ id: '1', type: 'input', data: { label: 'input node' }, position: { x: 250, y: 5 } }];
+const initialNodes: Node[] = [{ id: '1', type: 'input', data: { label: 'input node' }, position: { x: 250, y: 5 } }];

 const onDragOver = (event: DragEvent) => {
  event.preventDefault();
@@ -24,15 +23,15 @@ const onDragOver = (event: DragEvent) => {
 };

 let id = 0;
-const getId = (): ElementId => `dndnode_${id++}`;
+const getId = () => `dndnode_${id++}`;

 const DnDFlow = () => {
-  const [reactFlowInstance, setReactFlowInstance] = useState<OnLoadParams>();
-  const [elements, setElements] = useState<Elements>(initialElements);
+  const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);

-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onLoad = (_reactFlowInstance: OnLoadParams) => setReactFlowInstance(_reactFlowInstance);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
+  const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);

  const onDrop = (event: DragEvent) => {
    event.preventDefault();
@@ -47,7 +46,7 @@ const DnDFlow = () => {
        data: { label: `${type} node` },
      };

-      setElements((es) => es.concat(newNode));
+      setNodes((nds) => nds.concat(newNode));
    }
  };

@@ -56,10 +55,12 @@ const DnDFlow = () => {
      <ReactFlowProvider>
        <div className="reactflow-wrapper">
          <ReactFlow
-            elements={elements}
+            nodes={nodes}
+            edges={edges}
+            onEdgesChange={onEdgesChange}
+            onNodesChange={onNodesChange}
            onConnect={onConnect}
-            onElementsRemove={onElementsRemove}
-            onLoad={onLoad}
+            onInit={onInit}
            onDrop={onDrop}
            onDragOver={onDragOver}
          >
@@ -1,40 +1,49 @@
 /**
 * Example for checking the different edge types and source and target positions
 */
-import React, { useState } from 'react';

 import ReactFlow, {
-  removeElements,
  addEdge,
  MiniMap,
  Controls,
  Background,
-  OnLoadParams,
+  ReactFlowInstance,
  Connection,
  Edge,
-  Elements,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';
 import { getElements } from './utils';

-const onLoad = (reactFlowInstance: OnLoadParams) => {
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
  reactFlowInstance.fitView();
-  console.log(reactFlowInstance.getElements());
+  console.log(reactFlowInstance.getNodes());
 };

-const initialElements = getElements();
+const { nodes: initialNodes, edges: initialEdges } = getElements();
+
+const multiSelectionKeyCode = ['ShiftLeft', 'ShiftRight'];
+const deleteKeyCode = ['AltLeft+KeyD', 'Backspace'];

 const EdgeTypesFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlow
-      elements={elements}
-      onLoad={onLoad}
-      onElementsRemove={onElementsRemove}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onInit={onInit}
      onConnect={onConnect}
      minZoom={0.2}
+      zoomOnScroll={false}
+      selectionKeyCode="a+s"
+      multiSelectionKeyCode={multiSelectionKeyCode}
+      deleteKeyCode={deleteKeyCode}
+      zoomActivationKeyCode="z"
    >
      <MiniMap />
      <Controls />
@@ -1,4 +1,4 @@
-import { ElementId, Elements, Position } from 'react-flow-renderer';
+import { Edge, Node, Position } from 'react-flow-renderer';

 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;
@@ -9,10 +9,10 @@ const sourceTargetPositions = [
  { source: Position.Right, target: Position.Left },
 ];
 const nodeColors = [
-  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
-  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8'],
+  ['#0c5956', '#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
+  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8', '#4fa6e0'],
 ];
-const edgeTypes = ['default', 'step', 'smoothstep', 'straight'];
+const edgeTypes = ['default', 'step', 'smoothstep', 'straight', 'simplebezier'];
 const offsets = [
  {
    x: 0,
@@ -49,10 +49,10 @@ const offsets = [
 ];

 let id = 0;
-const getNodeId = (): ElementId => (id++).toString();
+const getNodeId = (): string => (id++).toString();

-export function getElements(): Elements {
-  const initialElements = [];
+export function getElements(): { nodes: Node[]; edges: Edge[] } {
+  const initialElements = { nodes: [] as Node[], edges: [] as Edge[] };

  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
    const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
@@ -70,7 +70,7 @@ export function getElements(): Elements {
        };
        const sourceId = getNodeId();
        const sourceData = { label: `Source ${sourceId}` };
-        const sourceNode = {
+        const sourceNode: Node = {
          id: sourceId,
          style,
          data: sourceData,
@@ -85,7 +85,7 @@ export function getElements(): Elements {
          x: sourcePosition.x + currOffset.x,
          y: sourcePosition.y + currOffset.y,
        };
-        const targetNode = {
+        const targetNode: Node = {
          id: targetId,
          style,
          data: targetData,
@@ -94,10 +94,15 @@ export function getElements(): Elements {
          targetPosition: currSourceTargetPos.target,
        };

-        initialElements.push(sourceNode);
-        initialElements.push(targetNode);
+        initialElements.nodes.push(sourceNode);
+        initialElements.nodes.push(targetNode);

-        initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType });
+        initialElements.edges.push({
+          id: `${sourceId}-${targetId}`,
+          source: sourceId,
+          target: targetId,
+          type: currEdgeType,
+        } as Edge);
      }
    }
  }
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EdgeProps, getBezierPath, getMarkerEnd } from 'react-flow-renderer';
+import { EdgeProps, getBezierPath } from 'react-flow-renderer';

 const CustomEdge: FC<EdgeProps> = ({
  id,
@@ -10,15 +10,12 @@ const CustomEdge: FC<EdgeProps> = ({
  sourcePosition,
  targetPosition,
  data,
-  arrowHeadType,
-  markerEndId,
 }) => {
  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);

  return (
    <>
-      <path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
      <text>
        <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
          {data.text}
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EdgeProps, getBezierPath, getMarkerEnd, EdgeText, getEdgeCenter } from 'react-flow-renderer';
+import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from 'react-flow-renderer';

 const CustomEdge: FC<EdgeProps> = ({
  id,
@@ -10,12 +10,9 @@ const CustomEdge: FC<EdgeProps> = ({
  sourcePosition,
  targetPosition,
  data,
-  arrowHeadType,
-  markerEndId,
 }) => {
  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
-  const [centerX, centerY] = getEdgeCenter({
+  const [centerX, centerY] = getBezierEdgeCenter({
    sourceX,
    sourceY,
    targetX,
@@ -24,7 +21,7 @@ const CustomEdge: FC<EdgeProps> = ({

  return (
    <>
-      <path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
      <EdgeText
        x={centerX}
        y={centerY}
@@ -1,32 +1,31 @@
-import React, { useState, MouseEvent } from 'react';
-
+import { MouseEvent } from 'react';
 import ReactFlow, {
-  removeElements,
  addEdge,
-  MiniMap,
-  Controls,
  Background,
-  OnLoadParams,
-  FlowElement,
-  EdgeTypesType,
-  Elements,
  Connection,
+  Controls,
  Edge,
-  ArrowHeadType,
+  EdgeTypes,
+  MarkerType,
+  MiniMap,
  Node,
+  Position,
+  ReactFlowInstance,
+  useEdgesState,
+  useNodesState,
 } from 'react-flow-renderer';
-
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';

-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
  { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
+  { id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
  { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
@@ -35,12 +34,48 @@ const initialElements: Elements = [
  { id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
  { id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
  { id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } },
+];
+
+const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' },
  { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
+  {
+    id: 'e2a-2b',
+    source: '2a',
+    target: '2b',
+    type: 'simplebezier',
+    label: 'simple bezier edge',
+  },
  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
  { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
  { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
  {
    id: 'e5-6',
    source: '5',
@@ -54,54 +89,46 @@ const initialElements: Elements = [
      </>
    ),
    labelStyle: { fill: 'red', fontWeight: 700 },
-    arrowHeadType: ArrowHeadType.Arrow,
-  },
-  {
-    id: 'e5-7',
-    source: '5',
-    target: '7',
-    label: 'label with styled bg',
-    labelBgPadding: [8, 4],
-    labelBgBorderRadius: 4,
-    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
-  },
-  {
-    id: 'e5-8',
-    source: '5',
-    target: '8',
-    type: 'custom',
-    data: { text: 'custom edge' },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
-  },
-  {
-    id: 'e5-9',
-    source: '5',
-    target: '9',
-    type: 'custom2',
-    data: { text: 'custom edge 2' },
+    style: { stroke: '#ffcc00' },
+    markerEnd: {
+      type: MarkerType.Arrow,
+      color: '#FFCC00',
+      markerUnits: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+      strokeWidth: 2,
+    },
+    markerStart: {
+      type: MarkerType.ArrowClosed,
+      color: '#FFCC00',
+      orient: 'auto-start-reverse',
+      markerUnits: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+    },
  },
 ];

-const edgeTypes: EdgeTypesType = {
+const edgeTypes: EdgeTypes = {
  custom: CustomEdge,
  custom2: CustomEdge2,
 };

 const EdgesFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlow
-      elements={elements}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
      onConnect={onConnect}
      onNodeDragStop={onNodeDragStop}
-      onLoad={onLoad}
+      onInit={onInit}
      snapToGrid={true}
      edgeTypes={edgeTypes}
    >
@@ -1,52 +1,51 @@
-import React, { useState, MouseEvent, CSSProperties } from 'react';
+import { MouseEvent, CSSProperties } from 'react';

 import ReactFlow, {
-  removeElements,
  addEdge,
-  MiniMap,
  Controls,
  Background,
-  OnLoadParams,
-  Elements,
-  ElementId,
  Node,
-  FlowElement,
  BackgroundVariant,
  Connection,
  Edge,
+  useNodesState,
+  useEdgesState,
+  ReactFlowInstance,
 } from 'react-flow-renderer';

-const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);

 const buttonStyle: CSSProperties = { position: 'absolute', left: 10, top: 10, zIndex: 4 };

 const EmptyFlow = () => {
-  const [elements, setElements] = useState<Elements>([]);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
  const addRandomNode = () => {
-    const nodeId: ElementId = (elements.length + 1).toString();
+    const nodeId = (nodes.length + 1).toString();
    const newNode: Node = {
      id: nodeId,
      data: { label: `Node: ${nodeId}` },
      position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
    };
-    setElements((els) => els.concat(newNode));
+    setNodes((nds) => nds.concat(newNode));
  };

  return (
    <ReactFlow
-      elements={elements}
-      onLoad={onLoad}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
      onConnect={(p) => onConnect(p)}
      onNodeDragStop={onNodeDragStop}
      onlyRenderVisibleElements={false}
    >
-      <MiniMap />
      <Controls />
      <Background variant={BackgroundVariant.Lines} />

@@ -16,7 +16,9 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({

  const targetNode = {
    id: 'connection-target',
-    __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } },
+    width: 1,
+    height: 1,
+    position: { x: targetX, y: targetY },
  } as Node;

  const { sx, sy } = getEdgeParams(sourceNode, targetNode);
@@ -1,14 +1,15 @@
 import { FC, useMemo, CSSProperties } from 'react';
-import { EdgeProps, getMarkerEnd, useStoreState, getBezierPath } from 'react-flow-renderer';
+import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'react-flow-renderer';

 import { getEdgeParams } from './utils';

-const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, markerEndId, style }) => {
-  const nodes = useStoreState((state) => state.nodes);
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+const nodeSelector = (s: ReactFlowState) => s.nodeInternals;

-  const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]);
-  const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]);
+const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
+  const nodeInternals = useStore(nodeSelector);
+
+  const sourceNode = useMemo(() => nodeInternals.get(source), [source, nodeInternals]);
+  const targetNode = useMemo(() => nodeInternals.get(target), [target, nodeInternals]);

  if (!sourceNode || !targetNode) {
    return null;
@@ -27,7 +28,7 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, marker

  return (
    <g className="react-flow__connection">
-      <path id={id} className="react-flow__edge-path" d={d} markerEnd={markerEnd} style={style as CSSProperties} />
+      <path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
    </g>
  );
 };
@@ -1,15 +1,13 @@
-import React, { useState } from 'react';
+import { useCallback } from 'react';

 import ReactFlow, {
-  removeElements,
  addEdge,
  Background,
-  OnLoadParams,
-  EdgeTypesType,
-  Elements,
+  ReactFlowInstance,
+  EdgeTypes,
  Connection,
-  Edge,
-  ArrowHeadType,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

 import './style.css';
@@ -18,29 +16,31 @@ import FloatingEdge from './FloatingEdge';
 import FloatingConnectionLine from './FloatingConnectionLine';
 import { createElements } from './utils';

-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();

-const initialElements: Elements = createElements();
+const { nodes: initialNodes, edges: initialEdges } = createElements();

-const edgeTypes: EdgeTypesType = {
+const edgeTypes: EdgeTypes = {
  floating: FloatingEdge,
 };

-const NodeAsHandleFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
+const FloatingEdges = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-
-  const onConnect = (params: Connection | Edge) =>
-    setElements((els) => addEdge({ ...params, type: 'floating', arrowHeadType: ArrowHeadType.Arrow }, els));
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
+  }, []);

  return (
    <div className="floatingedges">
      <ReactFlow
-        elements={elements}
-        onElementsRemove={onElementsRemove}
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
-        onLoad={onLoad}
+        onInit={onInit}
        edgeTypes={edgeTypes}
        connectionLineComponent={FloatingConnectionLine}
      >
@@ -50,4 +50,4 @@ const NodeAsHandleFlow = () => {
  );
 };

-export default NodeAsHandleFlow;
+export default FloatingEdges;
@@ -1,18 +1,19 @@
-import { Position, ArrowHeadType, Node, XYPosition } from 'react-flow-renderer';
+import { Position, XYPosition, Node, Edge } from 'react-flow-renderer';

 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
 function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+
  const {
    width: intersectionNodeWidth,
    height: intersectionNodeHeight,
    position: intersectionNodePosition,
-  } = intersectionNode.__rf;
-  const targetPosition = targetNode.__rf.position;
+  } = intersectionNode;
+  const targetPosition = targetNode.position;

-  const w = intersectionNodeWidth / 2;
-  const h = intersectionNodeHeight / 2;
+  const w = (intersectionNodeWidth ?? 0) / 2;
+  const h = (intersectionNodeHeight ?? 0) / 2;

  const x2 = intersectionNodePosition.x + w;
  const y2 = intersectionNodePosition.y + h;
@@ -32,7 +33,7 @@ function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPositi

 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
-  const n = { ...node.__rf.position, ...node.__rf };
+  const n = { ...node.position, ...node };
  const nx = Math.round(n.x);
  const ny = Math.round(n.y);
  const px = Math.round(intersectionPoint.x);
@@ -41,13 +42,13 @@ function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
  if (px <= nx + 1) {
    return Position.Left;
  }
-  if (px >= nx + n.width - 1) {
+  if (px >= nx + (n.width ?? 0) - 1) {
    return Position.Right;
  }
  if (py <= ny + 1) {
    return Position.Top;
  }
-  if (py >= n.y + n.height - 1) {
+  if (py >= n.y + (n.height ?? 0) - 1) {
    return Position.Bottom;
  }

@@ -72,11 +73,18 @@ export function getEdgeParams(source: Node, target: Node) {
  };
 }

-export function createElements() {
-  const elements = [];
+type NodesAndEdges = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+export function createElements(): NodesAndEdges {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
  const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };

-  elements.push({ id: 'target', data: { label: 'Target' }, position: center });
+  nodes.push({ id: 'target', data: { label: 'Target' }, position: center });

  for (let i = 0; i < 8; i++) {
    const degrees = i * (360 / 8);
@@ -84,16 +92,15 @@ export function createElements() {
    const x = 250 * Math.cos(radians) + center.x;
    const y = 250 * Math.sin(radians) + center.y;

-    elements.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } });
+    nodes.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } });

-    elements.push({
+    edges.push({
      id: `edge-${i}`,
      target: 'target',
      source: `${i}`,
      type: 'floating',
-      arrowHeadType: ArrowHeadType.Arrow,
    });
  }

-  return elements;
+  return { nodes, edges };
 }
@@ -1,34 +1,53 @@
-import React, { useState } from 'react';
+import { useState, useCallback } from 'react';

 import { useEffect } from 'react';
-import ReactFlow, { addEdge, MiniMap, Controls, Connection, Edge, Elements } from 'react-flow-renderer';
+import ReactFlow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Connection,
+  Edge,
+  Node,
+  useNodesState,
+  useEdgesState,
+} from 'react-flow-renderer';

-const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+const initialNodes: Node[] = [
+  { id: '1', type: 'input', hidden: true, data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', hidden: true, data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', hidden: true, data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', hidden: true, data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+];
+
+const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e3-4', source: '3', target: '4' },
 ];

+const setHidden = (hidden: boolean) => (els: any[]) =>
+  els.map((e: any) => {
+    e.hidden = hidden;
+    return e;
+  });
+
 const HiddenFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const [isHidden, setIsHidden] = useState<boolean>(false);
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes] = useNodesState(initialNodes);
+  const [edges, setEdges] = useEdgesState(initialEdges);
+
+  const [isHidden, setIsHidden] = useState<boolean>(true);
+
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
+  }, []);

  useEffect(() => {
-    setElements((els) =>
-      els.map((e) => {
-        e.isHidden = isHidden;
-        return e;
-      })
-    );
+    setNodes(setHidden(isHidden));
+    setEdges(setHidden(isHidden));
  }, [isHidden]);

  return (
-    <ReactFlow elements={elements} onConnect={onConnect}>
+    <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect}>
      <MiniMap />
      <Controls />

@@ -1,37 +1,42 @@
-import React, { useState, MouseEvent, WheelEvent } from 'react';
+import { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
 import ReactFlow, {
  addEdge,
  MiniMap,
  Controls,
-  Elements,
  Node,
-  FlowElement,
  Connection,
  Edge,
  PanOnScrollMode,
-  FlowTransform,
+  Viewport,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+];
+
+const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
 ];

-const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
-const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
+const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
+const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge);
+const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
 const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
-const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
-const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', flowTranasform);
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
+const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);

 const InteractionFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));

  const [isSelectable, setIsSelectable] = useState<boolean>(false);
  const [isDraggable, setIsDraggable] = useState<boolean>(false);
@@ -41,14 +46,17 @@ const InteractionFlow = () => {
  const [panOnScroll, setPanOnScroll] = useState<boolean>(false);
  const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(PanOnScrollMode.Free);
  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState<boolean>(false);
-  const [paneMoveable, setPaneMoveable] = useState<boolean>(true);
+  const [panOnDrag, setPanOnDrag] = useState<boolean>(true);
  const [captureZoomClick, setCaptureZoomClick] = useState<boolean>(false);
  const [captureZoomScroll, setCaptureZoomScroll] = useState<boolean>(false);
  const [captureElementClick, setCaptureElementClick] = useState<boolean>(false);

  return (
    <ReactFlow
-      elements={elements}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
      elementsSelectable={isSelectable}
      nodesConnectable={isConnectable}
      nodesDraggable={isDraggable}
@@ -58,10 +66,11 @@ const InteractionFlow = () => {
      panOnScrollMode={panOnScrollMode}
      zoomOnDoubleClick={zoomOnDoubleClick}
      onConnect={onConnect}
-      onElementClick={captureElementClick ? onElementClick : undefined}
+      onNodeClick={captureElementClick ? onNodeClick : undefined}
+      onEdgeClick={captureElementClick ? onEdgeClick : undefined}
      onNodeDragStart={onNodeDragStart}
      onNodeDragStop={onNodeDragStop}
-      paneMoveable={paneMoveable}
+      panOnDrag={panOnDrag}
      onPaneClick={captureZoomClick ? onPaneClick : undefined}
      onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
      onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
@@ -171,14 +180,14 @@ const InteractionFlow = () => {
          </label>
        </div>
        <div>
-          <label htmlFor="panemoveable">
-            paneMoveable
+          <label htmlFor="panondrag">
+            panOnDrag
            <input
-              id="panemoveable"
+              id="panondrag"
              type="checkbox"
-              checked={paneMoveable}
-              onChange={(event) => setPaneMoveable(event.target.checked)}
-              className="react-flow__panemoveable"
+              checked={panOnDrag}
+              onChange={(event) => setPanOnDrag(event.target.checked)}
+              className="react-flow__panondrag"
            />
          </label>
        </div>
@@ -1,74 +1,75 @@
-import React, { useState } from 'react';
+import { useCallback } from 'react';
 import ReactFlow, {
  ReactFlowProvider,
  addEdge,
-  removeElements,
  Controls,
-  isNode,
-  Elements,
  Connection,
-  Edge,
-  NodeExtent,
+  CoordinateExtent,
  Position,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';
 import dagre from 'dagre';

-import initialElements from './initial-elements';
+import initialItems from './initial-elements';

 import './layouting.css';

 const dagreGraph = new dagre.graphlib.Graph();
 dagreGraph.setDefaultEdgeLabel(() => ({}));

-const nodeExtent: NodeExtent = [
+const nodeExtent: CoordinateExtent = [
  [0, 0],
  [1000, 1000],
 ];

 const LayoutFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialItems.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialItems.edges);
+
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
+  }, []);

  const onLayout = (direction: string) => {
    const isHorizontal = direction === 'LR';
    dagreGraph.setGraph({ rankdir: direction });

-    elements.forEach((el) => {
-      if (isNode(el)) {
-        dagreGraph.setNode(el.id, { width: 150, height: 50 });
-      } else {
-        dagreGraph.setEdge(el.source, el.target);
-      }
+    nodes.forEach((node) => {
+      dagreGraph.setNode(node.id, { width: 150, height: 50 });
+    });
+
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target);
    });

    dagre.layout(dagreGraph);

-    const layoutedElements = elements.map((el) => {
-      if (isNode(el)) {
-        const nodeWithPosition = dagreGraph.node(el.id);
-        el.targetPosition = isHorizontal ? Position.Left : Position.Top;
-        el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
-        // we need to pass a slightly different position in order to notify react flow about the change
-        // @TODO how can we change the position handling so that we dont need this hack?
-        el.position = { x: nodeWithPosition.x + Math.random() / 1000, y: nodeWithPosition.y };
-      }
+    const layoutedNodes = nodes.map((node) => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+      node.targetPosition = isHorizontal ? Position.Left : Position.Top;
+      node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
+      // we need to pass a slightly different position in order to notify react flow about the change
+      // @TODO how can we change the position handling so that we dont need this hack?
+      node.position = { x: nodeWithPosition.x + Math.random() / 1000, y: nodeWithPosition.y };

-      return el;
+      return node;
    });

-    setElements(layoutedElements);
+    setNodes(layoutedNodes);
  };

  return (
    <div className="layoutflow">
      <ReactFlowProvider>
        <ReactFlow
-          elements={elements}
+          nodes={nodes}
+          edges={edges}
          onConnect={onConnect}
-          onElementsRemove={onElementsRemove}
          nodeExtent={nodeExtent}
-          onLoad={() => onLayout('TB')}
+          onInit={() => onLayout('TB')}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
        >
          <Controls />
        </ReactFlow>
@@ -1,8 +1,8 @@
-import { Elements, XYPosition } from 'react-flow-renderer';
+import { Node, Edge, XYPosition } from 'react-flow-renderer';

 const position: XYPosition = { x: 0, y: 0 };

-const elements: Elements = [
+const nodes: Node[] = [
  {
    id: '1',
    type: 'input',
@@ -56,6 +56,9 @@ const elements: Elements = [
    position,
  },
  { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
+];
+
+const edges: Edge[] = [
  { id: 'e12', source: '1', target: '2', type: 'smoothstep' },
  { id: 'e13', source: '1', target: '3', type: 'smoothstep' },
  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep' },
@@ -68,4 +71,6 @@ const elements: Elements = [
  { id: 'e57', source: '5', target: '7', type: 'smoothstep' },
 ];

-export default elements;
+const nodesAndEdges = { nodes, edges };
+
+export default nodesAndEdges;
@@ -1,34 +1,45 @@
-import React, { useState, FC } from 'react';
+import { FC } from 'react';

 import ReactFlow, {
-  removeElements,
  addEdge,
  Background,
-  Elements,
+  Node,
  Edge,
  Connection,
  ReactFlowProvider,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

 import './multiflows.css';

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
 ];

 const Flow: FC = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Edge | Connection) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlowProvider>
-      <ReactFlow elements={elements} onElementsRemove={onElementsRemove} onConnect={onConnect}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+      >
        <Background />
      </ReactFlow>
    </ReactFlowProvider>
@@ -0,0 +1,170 @@
+import { useState, MouseEvent, useCallback } from 'react';
+
+import ReactFlow, {
+  addEdge,
+  Background,
+  useNodesState,
+  useEdgesState,
+  MiniMap,
+  Controls,
+  Node,
+  Edge,
+  ReactFlowInstance,
+  Connection,
+} from 'react-flow-renderer';
+
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+
+const initialNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(255, 0, 0, 0.8)', width: 200, height: 200 },
+  },
+  {
+    id: '2a',
+    data: { label: 'Node 2a' },
+    position: { x: 10, y: 50 },
+    parentNode: '2',
+  },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 320, y: 100 }, className: 'light' },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 320, y: 200 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(255, 0, 0, 0.7)', width: 300, height: 300 },
+  },
+  {
+    id: '4a',
+    data: { label: 'Node 4a' },
+    position: { x: 15, y: 65 },
+    className: 'light',
+    parentNode: '4',
+    extent: 'parent',
+  },
+  {
+    id: '4b',
+    data: { label: 'Node 4b' },
+    position: { x: 15, y: 120 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(255, 0, 255, 0.7)', height: 150, width: 270 },
+    parentNode: '4',
+  },
+  {
+    id: '4b1',
+    data: { label: 'Node 4b1' },
+    position: { x: 20, y: 40 },
+    className: 'light',
+    parentNode: '4b',
+  },
+  {
+    id: '4b2',
+    data: { label: 'Node 4b2' },
+    position: { x: 100, y: 100 },
+    className: 'light',
+    parentNode: '4b',
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e2a-4a', source: '2a', target: '4a' },
+  { id: 'e3-4', source: '3', target: '4' },
+  { id: 'e3-4b', source: '3', target: '4b' },
+  { id: 'e4a-4b1', source: '4a', target: '4b1' },
+  { id: 'e4a-4b2', source: '4a', target: '4b2' },
+  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+];
+
+const NestedFlow = () => {
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
+  }, []);
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
+
+  const updatePos = () => {
+    setNodes((nds) => {
+      return nds.map((n) => {
+        n.position = {
+          x: Math.random() * 400,
+          y: Math.random() * 400,
+        };
+
+        return n;
+      });
+    });
+  };
+
+  const logToObject = () => console.log(rfInstance?.toObject());
+  const resetTransform = () => rfInstance?.setViewport({ x: 0, y: 0, zoom: 1 });
+
+  const toggleClassnames = () => {
+    setNodes((nds) => {
+      return nds.map((n) => {
+        n.className = n.className === 'light' ? 'dark' : 'light';
+        return n;
+      });
+    });
+  };
+
+  const toggleChildNodes = () => {
+    setNodes((nds) => {
+      return nds.map((n) => {
+        n.hidden = !!n.parentNode && !n.hidden;
+        return n;
+      });
+    });
+  };
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onEdgeClick={onEdgeClick}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      className="react-flow-basic-example"
+      defaultZoom={1.5}
+      minZoom={0.2}
+      maxZoom={4}
+      onlyRenderVisibleElements={false}
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+        <button onClick={resetTransform} style={{ marginRight: 5 }}>
+          reset transform
+        </button>
+        <button onClick={updatePos} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
+          toggle classnames
+        </button>
+        <button style={{ marginRight: 5 }} onClick={toggleChildNodes}>
+          toggleChildNodes
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default NestedFlow;
@@ -1,10 +1,16 @@
-import React, { useState, CSSProperties } from 'react';
+import { CSSProperties } from 'react';

-import ReactFlow, { addEdge, isEdge, OnLoadParams, Elements, Position, Connection, Edge } from 'react-flow-renderer';
+import ReactFlow, {
+  addEdge,
+  Node,
+  Position,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+} from 'react-flow-renderer';

-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
-
-const initialElements: Elements = [
+const initialNodes: Node[] = [
  {
    id: '1',
    sourcePosition: Position.Right,
@@ -20,31 +26,40 @@ const initialElements: Elements = [
    data: { label: 'A Node' },
    position: { x: 250, y: 0 },
  },
-  { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
 ];

+const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true }];
+
 const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 };

 const NodeTypeChangeFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
  const changeType = () => {
-    setElements((elms) =>
-      elms.map((el) => {
-        if (isEdge(el) || el.type === 'input') {
-          return el;
+    setNodes((nds) =>
+      nds.map((node) => {
+        if (node.type === 'input') {
+          return node;
        }

        return {
-          ...el,
-          type: el.type === 'default' ? 'output' : 'default',
+          ...node,
+          type: node.type === 'default' ? 'output' : 'default',
        };
      })
    );
  };

  return (
-    <ReactFlow elements={elements} onConnect={onConnect} onLoad={onLoad}>
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      fitView
+    >
      <button onClick={changeType} style={buttonStyle}>
        change type
      </button>
@@ -1,16 +1,18 @@
-import React, { useState, CSSProperties, FC } from 'react';
+import { useState, CSSProperties, FC } from 'react';

 import ReactFlow, {
  addEdge,
-  Elements,
+  Node,
  Position,
  Connection,
  Edge,
  NodeProps,
-  NodeTypesType,
+  NodeTypes,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  {
    id: '1',
    sourcePosition: Position.Right,
@@ -41,7 +43,7 @@ const NodeB: FC<NodeProps> = () => {
 };

 type NodeTypesObject = {
-  [key: string]: NodeTypesType;
+  [key: string]: NodeTypes;
 };

 const nodeTypesObjects: NodeTypesObject = {
@@ -55,16 +57,19 @@ const nodeTypesObjects: NodeTypesObject = {

 const NodeTypeChangeFlow = () => {
  const [nodeTypesId, setNodeTypesId] = useState<string>('a');
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
  const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a'));

  return (
    <ReactFlow
-      elements={elements}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      nodeTypes={nodeTypesObjects[nodeTypesId]}
-      nodeTypesId={nodeTypesId}
    >
      <button onClick={changeType} style={buttonStyle}>
        change type
@@ -1,54 +1,52 @@
-import React, { useState, MouseEvent, CSSProperties } from 'react';
-
+import { MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
 import ReactFlow, {
-  removeElements,
  addEdge,
  MiniMap,
  Controls,
  Background,
-  isNode,
  Node,
-  Elements,
-  FlowElement,
-  OnLoadParams,
-  FlowTransform,
+  Viewport,
  SnapGrid,
-  ArrowHeadType,
  Connection,
  Edge,
+  ReactFlowInstance,
+  useNodesState,
+  useEdgesState,
+  OnSelectionChangeParams,
 } from 'react-flow-renderer';

-const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
-const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeDoubleClick = (_: MouseEvent, node: Node) => console.log('node double click', node);
-const onPaneClick = (event: MouseEvent) => console.log('pane click', event);
-const onPaneScroll = (event?: MouseEvent) => console.log('pane scroll', event);
-const onPaneContextMenu = (event: MouseEvent) => console.log('pane context menu', event);
-const onSelectionDrag = (_: MouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
-const onSelectionDragStart = (_: MouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
-const onSelectionDragStop = (_: MouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
-const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
+const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
+const onNodeDrag = (_: ReactMouseEvent, node: Node) => console.log('drag', node);
+const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
+const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
+const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
+const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
+const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
+const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
+const onSelectionContextMenu = (event: ReactMouseEvent, nodes: Node[]) => {
  event.preventDefault();
  console.log('selection context menu', nodes);
 };
-const onElementClick = (_: MouseEvent, element: FlowElement) =>
-  console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
-const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements);
-const onLoad = (reactFlowInstance: OnLoadParams) => {
-  console.log('flow loaded:', reactFlowInstance);
-  reactFlowInstance.fitView();
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('node click:', node);
+
+const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
+  console.log('pane ready:', reactFlowInstance);
 };

-const onMoveStart = (transform?: FlowTransform) => console.log('zoom/move start', transform);
-const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform);
-const onEdgeContextMenu = (_: MouseEvent, edge: Edge) => console.log('edge context menu', edge);
-const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
-const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse move', edge);
-const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
-const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('edge double click', edge);
+const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
+const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
+const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
+const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
+const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
+const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
+const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
+const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
+const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  {
    id: '1',
    type: 'input',
@@ -122,10 +120,13 @@ const initialElements: Elements = [
    position: { x: 100, y: 480 },
  },
  { id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
+];
+
+const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
-  { id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
+  { id: 'e4-5', source: '4', target: '5', label: 'edge with arrow head' },
  { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
  {
    id: 'e5-7',
@@ -158,15 +159,17 @@ const nodeColor = (n: Node): string => {
 };

 const OverviewFlow = () => {
-  const [elements, setElements] = useState(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlow
-      elements={elements}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
      onConnect={onConnect}
      onPaneClick={onPaneClick}
      onPaneScroll={onPaneScroll}
@@ -182,7 +185,7 @@ const OverviewFlow = () => {
      onSelectionChange={onSelectionChange}
      onMoveStart={onMoveStart}
      onMoveEnd={onMoveEnd}
-      onLoad={onLoad}
+      onInit={onInit}
      connectionLineStyle={connectionLineStyle}
      snapToGrid={true}
      snapGrid={snapGrid}
@@ -191,6 +194,12 @@ const OverviewFlow = () => {
      onEdgeMouseMove={onEdgeMouseMove}
      onEdgeMouseLeave={onEdgeMouseLeave}
      onEdgeDoubleClick={onEdgeDoubleClick}
+      fitView
+      fitViewOptions={{ padding: 0.2 }}
+      attributionPosition="top-right"
+      maxZoom={Infinity}
+      onNodesDelete={onNodesDelete}
+      onEdgesDelete={onEdgesDelete}
    >
      <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
      <Controls />
@@ -1,13 +1,13 @@
-import React from 'react';
-import { useStoreState, useStoreActions } from 'react-flow-renderer';
+import { useStore, useStoreApi } from 'react-flow-renderer';

 const Sidebar = () => {
-  const nodes = useStoreState((store) => store.nodes);
-  const transform = useStoreState((store) => store.transform);
-  const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
+  const store = useStoreApi();
+  const nodeInternals = useStore((store) => store.nodeInternals);
+  const transform = useStore((store) => store.transform);

  const selectAll = () => {
-    setSelectedElements(nodes.map((node) => ({ id: node.id, type: node.type })));
+    nodeInternals.forEach((node) => (node.selected = true));
+    store.setState({ nodeInternals: new Map(nodeInternals) });
  };

  return (
@@ -20,9 +20,9 @@ const Sidebar = () => {
        [{transform[0].toFixed(2)}, {transform[1].toFixed(2)}, {transform[2].toFixed(2)}]
      </div>
      <div className="title">Nodes</div>
-      {nodes.map((node) => (
+      {Array.from(nodeInternals).map(([, node]) => (
        <div key={node.id}>
-          Node {node.id} - x: {node.__rf.position.x.toFixed(2)}, y: {node.__rf.position.y.toFixed(2)}
+          Node {node.id} - x: {node.position.x.toFixed(2)}, y: {node.position.y.toFixed(2)}
        </div>
      ))}

@@ -1,37 +1,40 @@
-import React, { useState, MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import ReactFlow, {
  ReactFlowProvider,
  addEdge,
-  removeElements,
+  Node,
  Controls,
-  OnLoadParams,
-  FlowElement,
  Connection,
  Edge,
-  Elements,
  ConnectionMode,
+  useNodesState,
+  useEdgesState,
+  ReactFlowInstance,
 } from 'react-flow-renderer';

 import Sidebar from './Sidebar';

 import './provider.css';

-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
-const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('pane ready:', reactFlowInstance);

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+];
+
+const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
 ];

 const ProviderFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));

  return (
    <div className="providerflow">
@@ -39,11 +42,13 @@ const ProviderFlow = () => {
        <Sidebar />
        <div className="reactflow-wrapper">
          <ReactFlow
-            elements={elements}
-            onElementClick={onElementClick}
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onNodeClick={onNodeClick}
            onConnect={onConnect}
-            onElementsRemove={onElementsRemove}
-            onLoad={onLoad}
+            onInit={onInit}
            connectionMode={ConnectionMode.Loose}
          >
            <Controls />
@@ -1,5 +1,5 @@
 import React, { memo, useCallback, Dispatch, FC } from 'react';
-import { useZoomPanHelper, OnLoadParams, Elements, FlowExportObject } from 'react-flow-renderer';
+import { useReactFlow, ReactFlowInstance, Edge, Node, ReactFlowJsonObject } from 'react-flow-renderer';
 import localforage from 'localforage';

 localforage.config({
@@ -12,12 +12,13 @@ const flowKey = 'example-flow';
 const getNodeId = () => `randomnode_${+new Date()}`;

 type ControlsProps = {
-  rfInstance?: OnLoadParams;
-  setElements: Dispatch<React.SetStateAction<Elements<any>>>;
+  rfInstance?: ReactFlowInstance;
+  setNodes: Dispatch<React.SetStateAction<Node<any>[]>>;
+  setEdges: Dispatch<React.SetStateAction<Edge<any>[]>>;
 };

-const Controls: FC<ControlsProps> = ({ rfInstance, setElements }) => {
-  const { transform } = useZoomPanHelper();
+const Controls: FC<ControlsProps> = ({ rfInstance, setNodes, setEdges }) => {
+  const { setViewport } = useReactFlow();

  const onSave = useCallback(() => {
    if (rfInstance) {
@@ -28,17 +29,18 @@ const Controls: FC<ControlsProps> = ({ rfInstance, setElements }) => {

  const onRestore = useCallback(() => {
    const restoreFlow = async () => {
-      const flow: FlowExportObject | null = await localforage.getItem(flowKey);
+      const flow: ReactFlowJsonObject | null = await localforage.getItem(flowKey);

      if (flow) {
-        const [x = 0, y = 0] = flow.position;
-        setElements(flow.elements || []);
-        transform({ x, y, zoom: flow.zoom || 0 });
+        const { x, y, zoom } = flow.viewport;
+        setNodes(flow.nodes || []);
+        setEdges(flow.edges || []);
+        setViewport({ x, y, zoom: zoom || 0 });
      }
    };

    restoreFlow();
-  }, [setElements, transform]);
+  }, [setNodes, setEdges, setViewport]);

  const onAdd = useCallback(() => {
    const newNode = {
@@ -46,8 +48,8 @@ const Controls: FC<ControlsProps> = ({ rfInstance, setElements }) => {
      data: { label: 'Added node' },
      position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
    };
-    setElements((els) => els.concat(newNode));
-  }, [setElements]);
+    setNodes((nds) => nds.concat(newNode));
+  }, [setNodes]);

  return (
    <div className="save__controls">
@@ -1,34 +1,43 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import ReactFlow, {
  ReactFlowProvider,
-  removeElements,
+  Node,
  addEdge,
-  Elements,
  Connection,
  Edge,
-  OnLoadParams,
+  ReactFlowInstance,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

 import Controls from './Controls';

 import './save.css';

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2' },
 ];

+const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
+
 const SaveRestore = () => {
-  const [rfInstance, setRfInstance] = useState<OnLoadParams>();
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance>();
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlowProvider>
-      <ReactFlow elements={elements} onElementsRemove={onElementsRemove} onConnect={onConnect} onLoad={setRfInstance}>
-        <Controls rfInstance={rfInstance} setElements={setElements} />
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onInit={setRfInstance}
+      >
+        <Controls rfInstance={rfInstance} setNodes={setNodes} setEdges={setEdges} />
      </ReactFlow>
    </ReactFlowProvider>
  );
@@ -1,58 +1,74 @@
-import React, { useState, CSSProperties } from 'react';
+import { useState, CSSProperties, useCallback } from 'react';
 import ReactFlow, {
-  removeElements,
-  addEdge,
  MiniMap,
-  isNode,
  Controls,
  Background,
-  OnLoadParams,
-  Elements,
-  Connection,
+  ReactFlowInstance,
  Edge,
+  Node,
+  NodeChange,
+  applyNodeChanges,
+  Connection,
+  addEdge,
+  applyEdgeChanges,
+  EdgeChange,
 } from 'react-flow-renderer';

-import { getElements } from './utils';
+import { getNodesAndEdges } from './utils';

 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 };

-const onLoad = (reactFlowInstance: OnLoadParams) => {
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
  reactFlowInstance.fitView();
-  console.log(reactFlowInstance.getElements());
+  console.log(reactFlowInstance.getNodes());
 };

-const initialElements: Elements = getElements(30, 30);
+const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(5, 5);

 const StressFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
+  }, []);
  const updatePos = () => {
-    setElements((elms) => {
-      return elms.map((el) => {
-        if (isNode(el)) {
-          return {
-            ...el,
-            position: {
-              x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight,
-            },
-          };
-        }
-
-        return el;
+    setNodes((nds) => {
+      return nds.map((n) => {
+        return {
+          ...n,
+          position: {
+            x: Math.random() * window.innerWidth,
+            y: Math.random() * window.innerHeight,
+          },
+        };
      });
    });
  };

  const updateElements = () => {
    const grid = Math.ceil(Math.random() * 10);
-    setElements(getElements(grid, grid));
+    const initialElements = getNodesAndEdges(grid, grid);
+    setNodes(initialElements.nodes);
+    setEdges(initialElements.edges);
  };

+  const onNodesChange = useCallback((changes: NodeChange[]) => {
+    setNodes((ns) => applyNodeChanges(changes, ns));
+  }, []);
+
+  const onEdgeChange = useCallback((changes: EdgeChange[]) => {
+    setEdges((es) => applyEdgeChanges(changes, es));
+  }, []);
+
  return (
-    <ReactFlow elements={elements} onLoad={onLoad} onElementsRemove={onElementsRemove} onConnect={onConnect}>
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      onConnect={onConnect}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgeChange}
+    >
      <MiniMap />
      <Controls />
      <Background />
@@ -1,7 +1,13 @@
-import { Elements } from 'react-flow-renderer';
+import { Node, Edge } from 'react-flow-renderer';

-export function getElements(xElements: number = 10, yElements: number = 10): Elements {
-  const initialElements = [];
+type ElementsCollection = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+export function getNodesAndEdges(xElements: number = 10, yElements: number = 10): ElementsCollection {
+  const initialNodes = [];
+  const initialEdges: Edge[] = [];
  let nodeId = 1;
  let recentNodeId = null;

@@ -15,10 +21,10 @@ export function getElements(xElements: number = 10, yElements: number = 10): Ele
        data,
        position,
      };
-      initialElements.push(node);
+      initialNodes.push(node);

      if (recentNodeId && nodeId <= xElements * yElements) {
-        initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() });
+        initialEdges.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() });
      }

      recentNodeId = nodeId;
@@ -26,5 +32,8 @@ export function getElements(xElements: number = 10, yElements: number = 10): Ele
    }
  }

-  return initialElements;
+  return {
+    nodes: initialNodes,
+    edges: initialEdges,
+  };
 }
@@ -0,0 +1,27 @@
+import { memo, FC, CSSProperties } from 'react';
+
+import { Handle, NodeProps, Position } from 'react-flow-renderer';
+
+const infoStyle: CSSProperties = { fontSize: 11 };
+const idStyle: CSSProperties = {
+  fontSize: 10,
+  color: '#888899',
+  position: 'absolute',
+  top: 2,
+  left: 2,
+};
+
+const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Top} />
+      <div style={idStyle}>{id}</div>
+      <div style={infoStyle}>
+        x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
+      </div>
+      <Handle type="source" position={Position.Bottom} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);
@@ -0,0 +1,197 @@
+import { useState, MouseEvent, useCallback } from 'react';
+
+import ReactFlow, {
+  addEdge,
+  Background,
+  MiniMap,
+  Controls,
+  Node,
+  Edge,
+  ReactFlowInstance,
+  Connection,
+  MarkerType,
+  useNodesState,
+  useEdgesState,
+} from 'react-flow-renderer';
+import DebugNode from './DebugNode';
+
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+
+const initialNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 100, y: 200 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(255,50, 50, 0.5)', width: 500, height: 300 },
+  },
+  {
+    id: '4a',
+    data: { label: 'Node 4a' },
+    position: { x: 15, y: 15 },
+    className: 'light',
+    parentNode: '4',
+    extent: 'parent',
+  },
+  {
+    id: '4b',
+    data: { label: 'Node 4b' },
+    position: { x: 150, y: 50 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(50, 50, 255, 0.5)', height: 200, width: 300 },
+    parentNode: '4',
+    expandParent: true,
+  },
+  {
+    id: '4b1',
+    data: { label: 'Node 4b1' },
+    position: { x: 20, y: 20 },
+    className: 'light',
+    parentNode: '4b',
+  },
+  {
+    id: '4b2',
+    data: { label: 'Node 4b2' },
+    position: { x: 20, y: 100 },
+    className: 'light',
+    parentNode: '4b',
+  },
+  {
+    id: '5',
+    type: 'group',
+    data: { label: 'Node 5' },
+    position: { x: 650, y: 250 },
+    className: 'light',
+    style: { width: 400, height: 150 },
+    zIndex: 1000,
+  },
+  {
+    id: '5a',
+    data: { label: 'Node 5a' },
+    position: { x: 25, y: 50 },
+    className: 'light',
+    parentNode: '5',
+  },
+  {
+    id: '5b',
+    data: { label: 'Node 5b' },
+    position: { x: 225, y: 50 },
+    className: 'light',
+    parentNode: '5',
+  },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    markerEnd: { type: MarkerType.Arrow, strokeWidth: 2, width: 15, height: 15, color: '#f00' },
+  },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
+  { id: 'e3-4b', source: '3', target: '4b' },
+  { id: 'e4a-4b1', source: '4a', target: '4b1' },
+  { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
+  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+];
+
+const nodeTypes = {
+  default: DebugNode,
+};
+
+const BasicFlow = () => {
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
+  }, []);
+
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
+
+  const updatePos = () => {
+    setNodes((nds) => {
+      return nds.map((n) => {
+        if (!n.parentNode) {
+          n.position = {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
+          };
+        }
+
+        return n;
+      });
+    });
+  };
+
+  const logToObject = () => console.log(rfInstance?.toObject());
+  const resetTransform = () => rfInstance?.setViewport({ x: 0, y: 0, zoom: 1 });
+
+  const toggleClassnames = () => {
+    setNodes((nds) => {
+      return nds.map((n) => {
+        n.className = n.className === 'light' ? 'dark' : 'light';
+        return n;
+      });
+    });
+  };
+
+  const toggleChildNodes = () => {
+    setNodes((nds) => {
+      return nds.map((n) => {
+        n.hidden = !!n.parentNode && !n.hidden;
+        return n;
+      });
+    });
+  };
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onEdgeClick={onEdgeClick}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      className="react-flow-basic-example"
+      defaultZoom={1.5}
+      minZoom={0.2}
+      maxZoom={4}
+      onlyRenderVisibleElements={false}
+      nodeTypes={nodeTypes}
+      fitView
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+        <button onClick={resetTransform} style={{ marginRight: 5 }}>
+          reset transform
+        </button>
+        <button onClick={updatePos} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
+          toggle classnames
+        </button>
+        <button style={{ marginRight: 5 }} onClick={toggleChildNodes}>
+          toggleChildNodes
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default BasicFlow;
@@ -1,26 +1,30 @@
-import React, { useState, MouseEvent } from 'react';
-
-import ReactFlow, { removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from 'react-flow-renderer';
+import { MouseEvent } from 'react';
+import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';

 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

-const elementsA: Elements = [
+const nodesA: Node[] = [
  { id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
  { id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
  { id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
  { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const edgesA: Edge[] = [
  { id: 'e1-2', source: '1a', target: '2a' },
  { id: 'e1-3', source: '1a', target: '3a' },
 ];

-const elementsB: Elements = [
+const nodesB: Node[] = [
  { id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, className: 'light' },
  { id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, className: 'light' },
  { id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, className: 'light' },
  { id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
  { id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, className: 'light' },
+];

+const edgesB: Edge[] = [
  { id: 'e1b', source: 'inputb', target: '1b' },
  { id: 'e2b', source: 'inputb', target: '2b' },
  { id: 'e3b', source: 'inputb', target: '3b' },
@@ -28,23 +32,39 @@ const elementsB: Elements = [
 ];

 const BasicFlow = () => {
-  const [elements, setElements] = useState<Elements>(elementsA);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes, onNodesChange] = useNodesState(nodesA);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(edgesA);
+
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));

  return (
    <ReactFlow
-      elements={elements}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
      onConnect={onConnect}
      onNodeDragStop={onNodeDragStop}
    >
      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <button onClick={() => setElements(elementsA)} style={{ marginRight: 5 }}>
+        <button
+          onClick={() => {
+            setNodes(nodesA);
+            setEdges(edgesA);
+          }}
+          style={{ marginRight: 5 }}
+        >
          flow a
        </button>
-        <button onClick={() => setElements(elementsB)}>flow b</button>
+        <button
+          onClick={() => {
+            setNodes(nodesB);
+            setEdges(edgesB);
+          }}
+        >
+          flow b
+        </button>
      </div>
    </ReactFlow>
  );
@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+import ReactFlow, {
+  Node,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  Position,
+  Connection,
+  addEdge,
+} from 'react-flow-renderer';
+
+import './touch-device.css';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1' },
+    position: { x: 100, y: 100 },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 300, y: 100 },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+  },
+];
+
+const initialEdges: Edge[] = [];
+
+const TouchDeviceFlow = () => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), []);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onConnect={onConnect}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      className="touchdevice-flow"
+    />
+  );
+};
+
+export default TouchDeviceFlow;
@@ -0,0 +1,19 @@
+.touchdevice-flow .react-flow__handle {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  background-color: #9f7aea;
+}
+
+.touchdevice-flow .react-flow__handle.connecting {
+  animation: bounce 1600ms infinite ease-out;
+}
+
+@keyframes bounce {
+  0% {
+    transform: translate(0, -50%) scale(1);
+  }
+  50% {
+    transform: translate(0, -50%) scale(1.1);
+  }
+}
@@ -1,67 +1,79 @@
-import React, { useState, useCallback } from 'react';
+import { useCallback } from 'react';

 import ReactFlow, {
-  NodeTypesType,
+  useReactFlow,
+  NodeTypes,
  addEdge,
-  useZoomPanHelper,
  ReactFlowProvider,
-  Elements,
+  Node,
  Connection,
  Edge,
-  ElementId,
  ConnectionLineType,
  ConnectionMode,
  updateEdge,
-  ArrowHeadType,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';
 import CustomNode from './CustomNode';

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  {
    id: '00',
    type: 'custom',
    position: { x: 300, y: 250 },
+    data: null,
  },
  {
    id: '01',
    type: 'custom',
    position: { x: 100, y: 50 },
+    data: null,
  },
  {
    id: '02',
    type: 'custom',
    position: { x: 500, y: 50 },
+    data: null,
  },
  {
    id: '03',
    type: 'custom',
    position: { x: 500, y: 500 },
+    data: null,
  },
  {
    id: '04',
    type: 'custom',
    position: { x: 100, y: 500 },
+    data: null,
  },
  {
    id: '10',
    type: 'custom',
    position: { x: 300, y: 5 },
+    data: null,
  },
  {
    id: '20',
    type: 'custom',
    position: { x: 600, y: 250 },
+    data: null,
  },
  {
    id: '30',
    type: 'custom',
    position: { x: 300, y: 600 },
+    data: null,
  },
  {
    id: '40',
    type: 'custom',
    position: { x: 5, y: 250 },
+    data: null,
  },
+];
+
+const initialEdges: Edge[] = [
  {
    id: 'e0-1a',
    source: '00',
@@ -69,7 +81,6 @@ const initialElements: Elements = [
    sourceHandle: 'left',
    targetHandle: 'bottom',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-1b',
@@ -78,7 +89,6 @@ const initialElements: Elements = [
    sourceHandle: 'top',
    targetHandle: 'right',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-2a',
@@ -87,7 +97,6 @@ const initialElements: Elements = [
    sourceHandle: 'top',
    targetHandle: 'left',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-2b',
@@ -96,7 +105,6 @@ const initialElements: Elements = [
    sourceHandle: 'right',
    targetHandle: 'bottom',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-3a',
@@ -105,7 +113,6 @@ const initialElements: Elements = [
    sourceHandle: 'right',
    targetHandle: 'top',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-3b',
@@ -114,7 +121,6 @@ const initialElements: Elements = [
    sourceHandle: 'bottom',
    targetHandle: 'left',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-4a',
@@ -123,7 +129,6 @@ const initialElements: Elements = [
    sourceHandle: 'bottom',
    targetHandle: 'right',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-4b',
@@ -132,7 +137,6 @@ const initialElements: Elements = [
    sourceHandle: 'left',
    targetHandle: 'top',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-10',
@@ -141,7 +145,6 @@ const initialElements: Elements = [
    sourceHandle: 'top',
    targetHandle: 'bottom',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-20',
@@ -150,7 +153,6 @@ const initialElements: Elements = [
    sourceHandle: 'right',
    targetHandle: 'left',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-30',
@@ -159,7 +161,6 @@ const initialElements: Elements = [
    sourceHandle: 'bottom',
    targetHandle: 'top',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e0-40',
@@ -168,31 +169,33 @@ const initialElements: Elements = [
    sourceHandle: 'left',
    targetHandle: 'right',
    type: 'default',
-    arrowHeadType: ArrowHeadType.Arrow,
  },
 ];

-const nodeTypes: NodeTypesType = {
+const nodeTypes: NodeTypes = {
  custom: CustomNode,
 };

 let id = 4;
-const getId = (): ElementId => `${id++}`;
+const getId = () => `${id++}`;

 const UpdateNodeInternalsFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'default' }, els));
-  const { project } = useZoomPanHelper();
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
+  const { project } = useReactFlow();
  const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
-    setElements((els) => updateEdge(oldEdge, newConnection, els));
+    setEdges((els) => updateEdge(oldEdge, newConnection, els));

  const onPaneClick = useCallback(
    (evt) =>
-      setElements((els) =>
-        els.concat({
+      setNodes((nds) =>
+        nds.concat({
          id: getId(),
          position: project({ x: evt.clientX, y: evt.clientY - 40 }),
          type: 'custom',
+          data: null,
        })
      ),
    [project]
@@ -200,7 +203,10 @@ const UpdateNodeInternalsFlow = () => {

  return (
    <ReactFlow
-      elements={elements}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
      nodeTypes={nodeTypes}
      onConnect={onConnect}
      onPaneClick={onPaneClick}
@@ -1,17 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import ReactFlow, {
  Controls,
  updateEdge,
  addEdge,
-  Elements,
-  OnLoadParams,
+  applyNodeChanges,
+  applyEdgeChanges,
+  ReactFlowInstance,
  Connection,
  Edge,
-  removeElements,
+  Node,
+  NodeChange,
+  EdgeChange,
 } from 'react-flow-renderer';
 import {HandleType} from "../../../dist";

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  {
    id: '1',
    type: 'input',
@@ -47,29 +50,41 @@ const initialElements: Elements = [
    position: { x: 400, y: 100 },
    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
  },
-  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
 ];

-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
+
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) => console.log(`start update ${handleType} handle`, edge);
 const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) => console.log(`end update ${handleType} handle`, edge);

 const UpdatableEdge = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
  const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
-    setElements((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+    setEdges((els) => updateEdge(oldEdge, newConnection, els));
+  const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
+
+  const onNodesChange = useCallback((changes: NodeChange[]) => {
+    console.log(changes);
+    setNodes((ns) => applyNodeChanges(changes, ns));
+  }, []);
+
+  const onEdgesChange = useCallback((changes: EdgeChange[]) => {
+    setEdges((es) => applyEdgeChanges(changes, es));
+  }, []);

  return (
    <ReactFlow
-      elements={elements}
-      onLoad={onLoad}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onInit={onInit}
      snapToGrid={true}
      onEdgeUpdate={onEdgeUpdate}
      onConnect={onConnect}
      onEdgeUpdateStart={onEdgeUpdateStart}
-      onElementsRemove={onElementsRemove}
      onEdgeUpdateEnd={onEdgeUpdateEnd}
    >
      <Controls />
@@ -1,64 +1,75 @@
-import React, { useEffect, useState } from 'react';
-import ReactFlow, { Elements } from 'react-flow-renderer';
+import { useEffect, useState } from 'react';
+import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';

 import './updatenode.css';

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2' },
 ];

+const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
+
 const UpdateNode = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
  const [nodeName, setNodeName] = useState<string>('Node 1');
  const [nodeBg, setNodeBg] = useState<string>('#eee');
  const [nodeHidden, setNodeHidden] = useState<boolean>(false);

  useEffect(() => {
-    setElements((els) =>
-      els.map((el) => {
-        if (el.id === '1') {
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === '1') {
          // it's important that you create a new object here in order to notify react flow about the change
-          el.data = {
-            ...el.data,
+          n.data = {
+            ...n.data,
            label: nodeName,
          };
        }

-        return el;
+        return n;
      })
    );
-  }, [nodeName, setElements]);
+  }, [nodeName]);

  useEffect(() => {
-    setElements((els) =>
-      els.map((el) => {
-        if (el.id === '1') {
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === '1') {
          // it's important that you create a new object here in order to notify react flow about the change
-          el.style = { ...el.style, backgroundColor: nodeBg };
+          n.style = { ...n.style, backgroundColor: nodeBg };
        }

-        return el;
+        return n;
      })
    );
-  }, [nodeBg, setElements]);
+  }, [nodeBg]);

  useEffect(() => {
-    setElements((els) =>
-      els.map((el) => {
-        if (el.id === '1' || el.id === 'e1-2') {
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === '1' || n.id === 'e1-2') {
          // when you update a simple type you can just update the value
-          el.isHidden = nodeHidden;
+          n.hidden = nodeHidden;
        }

-        return el;
+        return n;
      })
    );
-  }, [nodeHidden, setElements]);
+  }, [nodeHidden]);

  return (
-    <ReactFlow elements={elements} defaultZoom={1.5} minZoom={0.2} maxZoom={4}>
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      defaultZoom={1.5}
+      minZoom={0.2}
+      maxZoom={4}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+    >
      <div className="updatenode__controls">
        <label>label:</label>
        <input value={nodeName} onChange={(evt) => setNodeName(evt.target.value)} />
@@ -0,0 +1,11 @@
+import { useKeyPress } from 'react-flow-renderer';
+
+const UseKeyPressComponent = () => {
+  const metaPressed = useKeyPress(['Meta']);
+
+  console.log({ metaPressed });
+
+  return <div />;
+};
+
+export default UseKeyPressComponent;
@@ -0,0 +1,111 @@
+import { useCallback } from 'react';
+
+import ReactFlow, {
+  Node,
+  addEdge,
+  Background,
+  MiniMap,
+  useReactFlow,
+  ReactFlowProvider,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+} from 'react-flow-renderer';
+
+const initialNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+let id = 5;
+
+const getId = () => `${id++}`;
+
+const UseZoomPanHelperFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
+  const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook } = useReactFlow();
+
+  const onPaneClick = useCallback(
+    (evt) => {
+      const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 });
+
+      setNodes((nds) =>
+        nds.concat({
+          id: getId(),
+          position: projectedPosition,
+          data: {
+            label: `${projectedPosition.x}-${projectedPosition.y}`,
+          },
+        })
+      );
+    },
+    [project, setNodes]
+  );
+
+  const onNodeClick = useCallback(
+    (_, element) => {
+      const { x, y } = element.position;
+      setCenter(x, y, { zoom: 1, duration: 1200 });
+    },
+    [setCenter]
+  );
+
+  const onAddNode = useCallback(() => {
+    const newNode = {
+      id: getId(),
+      position: { x: Math.random() * 500, y: Math.random() * 500 },
+      data: {
+        label: 'New Node',
+      },
+    };
+
+    addNodes(newNode);
+  }, [addNodes]);
+
+  const onResetNodes = useCallback(() => {
+    setNodesHook(initialNodes);
+  }, [setNodesHook]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onConnect={onConnect}
+      onPaneClick={onPaneClick}
+      fitView
+      fitViewOptions={{ duration: 1200, padding: 0.2 }}
+      maxZoom={Infinity}
+    >
+      <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
+        <button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
+        <button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
+        <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
+        <button onClick={onAddNode}>add node</button>
+        <button onClick={onResetNodes}>reset nodes</button>
+      </div>
+      <Background />
+      <MiniMap />
+    </ReactFlow>
+  );
+};
+
+const WrappedFlow = () => (
+  <ReactFlowProvider>
+    <UseZoomPanHelperFlow />
+  </ReactFlowProvider>
+);
+
+export default WrappedFlow;
@@ -1,5 +1,4 @@
 import React, { memo, FC, useMemo, CSSProperties } from 'react';
-
 import { Handle, Position, NodeProps } from 'react-flow-renderer';

 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
@@ -1,23 +1,23 @@
-import React, { useState, useCallback, CSSProperties } from 'react';
+import { useCallback, CSSProperties } from 'react';

 import ReactFlow, {
-  NodeTypesType,
+  NodeTypes,
  addEdge,
-  useZoomPanHelper,
+  useReactFlow,
  ReactFlowProvider,
-  Elements,
+  Node,
  Connection,
  Edge,
-  ElementId,
  useUpdateNodeInternals,
  Position,
-  isEdge,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';
 import CustomNode from './CustomNode';

 const initialHandleCount = 1;

-const initialElements: Elements = [
+const initialNodes: Node[] = [
  {
    id: '1',
    type: 'custom',
@@ -28,23 +28,25 @@ const initialElements: Elements = [

 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 };

-const nodeTypes: NodeTypesType = {
+const nodeTypes: NodeTypes = {
  custom: CustomNode,
 };

 let id = 5;
-const getId = (): ElementId => `${id++}`;
+const getId = (): string => `${id++}`;

 const UpdateNodeInternalsFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
+
  const updateNodeInternals = useUpdateNodeInternals();
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-  const { project } = useZoomPanHelper();
+  const { project } = useReactFlow();

  const onPaneClick = useCallback(
    (evt) =>
-      setElements((els) =>
-        els.concat({
+      setNodes((nds) =>
+        nds.concat({
          id: getId(),
          position: project({ x: evt.clientX, y: evt.clientY - 40 }),
          data: { label: 'new node' },
@@ -56,25 +58,17 @@ const UpdateNodeInternalsFlow = () => {
  );

  const toggleHandleCount = useCallback(() => {
-    setElements((els) =>
-      els.map((el) => {
-        if (isEdge(el)) {
-          return el;
-        }
-
-        return { ...el, data: { ...el.data, handleCount: el.data?.handleCount === 1 ? 2 : 1 } };
+    setNodes((nds) =>
+      nds.map((node) => {
+        return { ...node, data: { ...node.data, handleCount: node.data?.handleCount === 1 ? 2 : 1 } };
      })
    );
  }, []);

  const toggleHandlePosition = useCallback(() => {
-    setElements((els) =>
-      els.map((el) => {
-        if (isEdge(el)) {
-          return el;
-        }
-
-        return { ...el, data: { ...el.data, handlePosition: el.data?.handlePosition === 0 ? 1 : 0 } };
+    setNodes((nds) =>
+      nds.map((node) => {
+        return { ...node, data: { ...node.data, handlePosition: node.data?.handlePosition === 0 ? 1 : 0 } };
      })
    );
  }, []);
@@ -82,7 +76,15 @@ const UpdateNodeInternalsFlow = () => {
  const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]);

  return (
-    <ReactFlow elements={elements} nodeTypes={nodeTypes} onConnect={onConnect} onPaneClick={onPaneClick}>
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      nodeTypes={nodeTypes}
+      onConnect={onConnect}
+      onPaneClick={onPaneClick}
+    >
      <div style={buttonWrapperStyles}>
        <button onClick={toggleHandleCount}>toggle handle count</button>
        <button onClick={toggleHandlePosition}>toggle handle position</button>
@@ -1,83 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import ReactFlow, {
-  removeElements,
-  addEdge,
-  Background,
-  MiniMap,
-  useZoomPanHelper,
-  ReactFlowProvider,
-  Elements,
-  ElementId,
-  Connection,
-  Edge,
-} from 'react-flow-renderer';
-
-const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-];
-
-let id = 5;
-const getId = (): ElementId => `${id++}`;
-
-const UseZoomPanHelperFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-  const { project, setCenter, zoomIn, zoomOut } = useZoomPanHelper();
-
-  const onPaneClick = useCallback(
-    (evt) => {
-      const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 });
-
-      setElements((els) =>
-        els.concat({
-          id: getId(),
-          position: projectedPosition,
-          data: {
-            label: `${projectedPosition.x}-${projectedPosition.y}`,
-          },
-        })
-      );
-    },
-    [project]
-  );
-
-  const onElementClick = useCallback(
-    (_, element) => {
-      const { x, y } = element.position;
-      setCenter(x, y, 1);
-    },
-    [setCenter]
-  );
-
-  return (
-    <ReactFlow
-      elements={elements}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
-      onConnect={onConnect}
-      onPaneClick={onPaneClick}
-    >
-      <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
-        <button onClick={() => zoomIn(1200)}>zoomIn</button>
-        <button onClick={() => zoomOut(0)}>zoomOut</button>
-      </div>
-      <Background />
-      <MiniMap />
-    </ReactFlow>
-  );
-};
-
-const WrappedFlow = () => (
-  <ReactFlowProvider>
-    <UseZoomPanHelperFlow />
-  </ReactFlowProvider>
-);
-
-export default WrappedFlow;
@@ -1,27 +1,27 @@
-import React, { useState, MouseEvent as ReactMouseEvent, FC } from 'react';
+import { MouseEvent as ReactMouseEvent, FC } from 'react';
 import ReactFlow, {
  addEdge,
  Handle,
-  OnLoadParams,
  Connection,
  Position,
-  Elements,
+  Node,
  Edge,
  OnConnectStartParams,
  NodeProps,
-  NodeTypesType,
+  NodeTypes,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';

 import './validation.css';

-const initialElements: Elements = [
-  { id: '0', type: 'custominput', position: { x: 0, y: 150 } },
-  { id: 'A', type: 'customnode', position: { x: 250, y: 0 } },
-  { id: 'B', type: 'customnode', position: { x: 250, y: 150 } },
-  { id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
+const initialNodes: Node[] = [
+  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: null },
+  { id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: null },
+  { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: null },
+  { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null },
 ];

-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
 const isValidConnection = (connection: Connection) => connection.target === 'B';
 const onConnectStart = (_: ReactMouseEvent, { nodeId, handleType }: OnConnectStartParams) =>
  console.log('on connect start', { nodeId, handleType });
@@ -43,31 +43,36 @@ const CustomNode: FC<NodeProps> = ({ id }) => (
  </>
 );

-const nodeTypes: NodeTypesType = {
+const nodeTypes: NodeTypes = {
  custominput: CustomInput,
  customnode: CustomNode,
 };

-const HorizontalFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
+const ValidationFlow = () => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
  const onConnect = (params: Connection | Edge) => {
    console.log('on connect', params);
-    setElements((els) => addEdge(params, els));
+    setEdges((eds) => addEdge(params, eds));
  };

  return (
    <ReactFlow
-      elements={elements}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      selectNodesOnDrag={false}
-      onLoad={onLoad}
      className="validationflow"
      nodeTypes={nodeTypes}
      onConnectStart={onConnectStart}
      onConnectStop={onConnectStop}
      onConnectEnd={onConnectEnd}
+      fitView
    />
  );
 };

-export default HorizontalFlow;
+export default ValidationFlow;
@@ -1,89 +1,105 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
-
-import Overview from './Overview';
+import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import Basic from './Basic';
-import CustomNode from './CustomNode';
-import Stress from './Stress';
-import Interaction from './Interaction';
-import Empty from './Empty';
-import Edges from './Edges';
-import Validation from './Validation';
-import Provider from './Provider';
-import Hidden from './Hidden';
-import EdgeTypes from './EdgeTypes';
+import ControlledUncontrolled from './ControlledUncontrolled';
 import CustomConnectionLine from './CustomConnectionLine';
+import CustomNode from './CustomNode';
+import DefaultNodes from './DefaultNodes';
+import DragHandle from './DragHandle';
+import DragNDrop from './DragNDrop';
+import Edges from './Edges';
+import EdgeTypes from './EdgeTypes';
+import Empty from './Empty';
 import FloatingEdges from './FloatingEdges';
+import Hidden from './Hidden';
+import './index.css';
+import Interaction from './Interaction';
+import Layouting from './Layouting';
+import MultiFlows from './MultiFlows';
+import NestedNodes from './NestedNodes';
 import NodeTypeChange from './NodeTypeChange';
 import NodeTypesObjectChange from './NodeTypesObjectChange';
+import Overview from './Overview';
+import Provider from './Provider';
+import SaveRestore from './SaveRestore';
+import Stress from './Stress';
+import Subflow from './Subflow';
+import SwitchFlow from './Switch';
+import TouchDevice from './TouchDevice';
+import Undirectional from './Undirectional';
 import UpdatableEdge from './UpdatableEdge';
 import UpdateNode from './UpdateNode';
-import SaveRestore from './SaveRestore';
-import DragNDrop from './DragNDrop';
-import Layout from './Layouting';
-import SwitchFlows from './Switch';
-import UseZoomPanHelper from './UseZoomPanHelper';
 import UseUpdateNodeInternals from './UseUpdateNodeInternals';
-import Undirectional from './Undirectional';
-import MultiFlows from './MultiFlows';
-import DragHandle from './DragHandle';
-
-import './index.css';
+import UseReactFlow from './UseReactFlow';
+import Validation from './Validation';
+import UseKeyPress from './UseKeyPress';

 const routes = [
  {
    path: '/',
    component: Overview,
  },
-  {
-    path: '/edges',
-    component: Edges,
-  },
-  {
-    path: '/custom-node',
-    component: CustomNode,
-  },
-  {
-    path: '/validation',
-    component: Validation,
-  },
-  {
-    path: '/provider',
-    component: Provider,
-  },
-  {
-    path: '/stress',
-    component: Stress,
-  },
-  {
-    path: '/interaction',
-    component: Interaction,
-  },
  {
    path: '/basic',
    component: Basic,
  },
  {
-    path: '/empty',
-    component: Empty,
-  },
-  {
-    path: '/hidden',
-    component: Hidden,
-  },
-  {
-    path: '/edge-types',
-    component: EdgeTypes,
+    path: '/default-nodes',
+    component: DefaultNodes,
  },
  {
    path: '/custom-connectionline',
    component: CustomConnectionLine,
  },
+  {
+    path: '/custom-node',
+    component: CustomNode,
+  },
+  {
+    path: '/draghandle',
+    component: DragHandle,
+  },
+  {
+    path: '/dragndrop',
+    component: DragNDrop,
+  },
+  {
+    path: '/edges',
+    component: Edges,
+  },
+  {
+    path: '/edge-types',
+    component: EdgeTypes,
+  },
+  {
+    path: '/empty',
+    component: Empty,
+  },
  {
    path: '/floating-edges',
    component: FloatingEdges,
  },
+  {
+    path: '/hidden',
+    component: Hidden,
+  },
+  {
+    path: '/interaction',
+    component: Interaction,
+  },
+  {
+    path: '/layouting',
+    component: Layouting,
+  },
+  {
+    path: '/multiflows',
+    component: MultiFlows,
+  },
+  {
+    path: '/nested-nodes',
+    component: NestedNodes,
+  },
  {
    path: '/nodetype-change',
    component: NodeTypeChange,
@@ -92,6 +108,34 @@ const routes = [
    path: '/nodetypesobject-change',
    component: NodeTypesObjectChange,
  },
+  {
+    path: '/provider',
+    component: Provider,
+  },
+  {
+    path: '/save-restore',
+    component: SaveRestore,
+  },
+  {
+    path: '/stress',
+    component: Stress,
+  },
+  {
+    path: '/subflow',
+    component: Subflow,
+  },
+  {
+    path: '/switch',
+    component: SwitchFlow,
+  },
+  {
+    path: '/touch-device',
+    component: TouchDevice,
+  },
+  {
+    path: '/undirectional',
+    component: Undirectional,
+  },
  {
    path: '/updatable-edge',
    component: UpdatableEdge,
@@ -101,45 +145,31 @@ const routes = [
    component: UpdateNode,
  },
  {
-    path: '/save-restore',
-    component: SaveRestore,
-  },
-  {
-    path: '/drag-and-drop',
-    component: DragNDrop,
-  },
-  {
-    path: '/layouting',
-    component: Layout,
-  },
-  {
-    path: '/switch',
-    component: SwitchFlows,
-  },
-  {
-    path: '/usezoompanhelper',
-    component: UseZoomPanHelper,
+    path: '/usereactflow',
+    component: UseReactFlow,
  },
  {
    path: '/useupdatenodeinternals',
    component: UseUpdateNodeInternals,
  },
  {
-    path: '/undirectional',
-    component: Undirectional,
+    path: '/validation',
+    component: Validation,
  },
  {
-    path: '/multiflows',
-    component: MultiFlows,
+    path: '/controlled-uncontrolled',
+    component: ControlledUncontrolled,
  },
  {
-    path: '/draghandle',
-    component: DragHandle,
+    path: '/use-key-press',
+    component: UseKeyPress,
  },
 ];

-const Header = withRouter(({ history, location }) => {
-  const onChange = (event: ChangeEvent<HTMLSelectElement>) => history.push(event.target.value);
+const Header = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const onChange = (event: ChangeEvent<HTMLSelectElement>) => navigate(event.target.value);

  return (
    <header>
@@ -149,22 +179,22 @@ const Header = withRouter(({ history, location }) => {
      <select defaultValue={location.pathname} onChange={onChange}>
        {routes.map((route) => (
          <option value={route.path} key={route.path}>
-            {route.path === '/' ? 'overview' : route.path.substr(1, route.path.length)}
+            {route.path === '/' ? 'overview' : route.path.substring(1, route.path.length)}
          </option>
        ))}
      </select>
    </header>
  );
-});
+};

 ReactDOM.render(
-  <Router forceRefresh={true}>
+  <BrowserRouter>
    <Header />
-    <Switch>
+    <Routes>
      {routes.map((route) => (
-        <Route exact path={route.path} render={() => <route.component />} key={route.path} />
+        <Route path={route.path} key={route.path} element={<route.component />} />
      ))}
-    </Switch>
-  </Router>,
+    </Routes>
+  </BrowserRouter>,
  document.getElementById('root')
 );