Guides -> Custom Nodes -> Adding the Node Type

src/App.tsx

@@ -10,27 +10,31 @@ import ReactFlow, {
   NodeChange,
   EdgeChange,
   Connection,
+  NodeTypes,
 } 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 rfStyle = {
+  backgroundColor: '#B8CEFF',
+};
+
 const initialEdges: Edge[] = [];
 
 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',
-    data: { label: 'World!' },
-    position: { x: 100, y: 100 },
   },
 ];
 
+const nodeTypes: NodeTypes = { textUpdater: TextUpdaterNode };
+
 const Flow = () => {
   const [nodes, setNodes] = useState(initialNodes);
   const [edges, setEdges] = useState(initialEdges);
@@ -60,6 +64,9 @@ const Flow = () => {
         edges={edges}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+        style={rfStyle}
       >
         <Background />
         <Controls />

src/components/TextUpdaterNode.tsx

@@ -1,32 +1,41 @@
 import { useCallback } from 'react';
 import { Handle, Position } from 'reactflow';
 
+import './text-updater-node.css';
+
 const handleStyle = { left: 10 };
 
-const TextUpdaterNode = ({ data }) => {
+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} />
-      <div>
-        <label htmlFor={'text'}>Text:</label>
-        <input
-          id={'text'}
-          name={'text'}
-          onChange={onChange}
-          className={'nodrag'}
-        />
-      </div>
-      <Handle type={'source'} position={Position.Bottom} id={'a'} />
       <Handle
-        type={'source'}
+        type={'target'}
-        position={Position.Bottom}
+        position={Position.Top}
-        id={'b'}
+        isConnectable={isConnectable}
-        style={handleStyle}
       />
-    </>
+      <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;
+}