Guides -> Custom Nodes -> Using Multiple Handles

src/App.tsx

@@ -1,46 +1,76 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import ReactFlow, {
-  Background,
+  addEdge,
-  Controls,
   applyEdgeChanges,
   applyNodeChanges,
-  addEdge,
+  Background,
+  Connection,
+  Controls,
+  Edge,
+  EdgeChange,
+  Node,
+  NodeChange,
+  NodeTypes,
+  Position,
 } from 'reactflow';
 
+import TextUpdaterNode from './components/TextUpdaterNode';
+
 // we have to import the React Flow styles for it to work
 import 'reactflow/dist/style.css';
 
-const initialEdges = [];
+const rfStyle = {
+  backgroundColor: '#B8CEFF',
+};
 
-const initialNodes = [
+const initialEdges: Edge[] = [
+  { id: 'edge-1', source: 'node-1', target: 'node-2', sourceHandle: 'a' },
+  { id: 'edge-2', source: 'node-1', target: 'node-3', sourceHandle: 'b' },
+];
+
+const initialNodes: Node[] = [
   {
-    id: '1',
+    id: 'node-1',
-    data: { label: 'Hello' },
+    type: 'textUpdater',
     position: { x: 0, y: 0 },
-    type: 'input',
+    data: { value: 123 },
   },
   {
-    id: '2',
+    id: 'node-2',
-    data: { label: 'World!' },
+    type: 'output',
-    position: { x: 100, y: 100 },
+    targetPosition: Position.Top,
+    position: { x: 0, y: 200 },
+    data: { label: 'node 2' },
+  },
+  {
+    id: 'node-3',
+    type: 'output',
+    targetPosition: Position.Top,
+    position: { x: 200, y: 200 },
+    data: { label: 'node 3' },
   },
 ];
 
+const nodeTypes: NodeTypes = { textUpdater: TextUpdaterNode };
+
 const Flow = () => {
   const [nodes, setNodes] = useState(initialNodes);
   const [edges, setEdges] = useState(initialEdges);
 
   const onNodesChange = useCallback(
-    changes => setNodes(nds => applyNodeChanges(changes, nds)),
+    (changes: NodeChange[]) =>
+      setNodes((nds: Node[]) => applyNodeChanges(changes, nds)),
     [],
   );
   const onEdgesChange = useCallback(
-    changes => setEdges(eds => applyEdgeChanges(changes, eds)),
+    (changes: EdgeChange[]) =>
+      setEdges((eds: Edge[]) => applyEdgeChanges(changes, eds)),
     [],
   );
 
   const onConnect = useCallback(
-    params => setEdges(eds => addEdge(params, eds)),
+    (params: Edge | Connection) =>
+      setEdges((eds: Edge[]) => addEdge(params, eds)),
     [],
   );
 
@@ -52,6 +82,9 @@ const Flow = () => {
         edges={edges}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+        style={rfStyle}
       >
         <Background />
         <Controls />

src/components/TextUpdaterNode.tsx

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import { Handle, Position } from 'reactflow';
+
+import './text-updater-node.css';
+
+const handleStyle = { left: 10 };
+
+const TextUpdaterNode = ({ data, isConnectable }) => {
+  const onChange = useCallback(evt => {
+    console.log(evt.target.value);
+  }, []);
+
+  return (
+    <div className={'text-updater-node'}>
+      <Handle
+        type={'target'}
+        position={Position.Top}
+        isConnectable={isConnectable}
+      />
+      <div>
+        <label htmlFor="text">Text:</label>
+        <input id="text" name="text" onChange={onChange} className="nodrag" />
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="a"
+        style={handleStyle}
+        isConnectable={isConnectable}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="b"
+        isConnectable={isConnectable}
+      />
+    </div>
+  );
+};
+
+export default TextUpdaterNode;

src/components/text-updater-node.css

@@ -0,0 +1,13 @@
+.text-updater-node {
+    height: 50px;
+    border: 1px solid #eee;
+    padding: 5px;
+    border-radius: 5px;
+    background: white;
+}
+
+.text-updater-node label {
+    display: block;
+    color: #777;
+    font-size: 12px;
+}