Guides -> Custom Nodes -> Implementing the Custom Node

src/components/TextUpdaterNode.tsx

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { Handle, Position } from 'reactflow';
+
+const handleStyle = { left: 10 };
+
+const TextUpdaterNode = ({ data }) => {
+  const onChange = useCallback(evt => {
+    console.log(evt.target.value);
+  }, []);
+
+  return (
+    <>
+      <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'}
+        position={Position.Bottom}
+        id={'b'}
+        style={handleStyle}
+      />
+    </>
+  );
+};