chore(useNodesData): example

examples/react/src/examples/UseNodesData/UppercaseNode.tsx

@@ -0,0 +1,24 @@
+import { memo, useEffect } from 'react';
+import { Position, NodeProps, useUpdateNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
+
+function UppercaseNode({ id }: NodeProps) {
+  const connections = useHandleConnections({
+    handleType: 'target',
+  });
+  const nodeData = useNodesData<{ text: string }>(connections[0]?.source);
+  const updateNodeData = useUpdateNodeData();
+
+  useEffect(() => {
+    updateNodeData(id, { text: nodeData?.text.toUpperCase() });
+  }, [nodeData]);
+
+  return (
+    <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
+      <Handle type="source" position={Position.Right} />
+      <div>uppercase transform</div>
+      <Handle type="target" position={Position.Left} isConnectable={connections.length === 0} />
+    </div>
+  );
+}
+
+export default memo(UppercaseNode);

examples/react/src/examples/UseNodesData/index.tsx

@@ -13,10 +13,12 @@ import {
 
 import TextNode from './TextNode';
 import ResultNode from './ResultNode';
+import UppercaseNode from './UppercaseNode';
 
 const nodeTypes = {
   text: TextNode,
   result: ResultNode,
+  uppercase: UppercaseNode,
 };
 
 const initNodes: Node[] = [
@@ -26,8 +28,15 @@ const initNodes: Node[] = [
     data: {
       text: 'hello',
     },
-    position: { x: 0, y: 0 },
+    position: { x: -100, y: -50 },
   },
+  {
+    id: '1a',
+    type: 'uppercase',
+    data: {},
+    position: { x: 100, y: 0 },
+  },
+
   {
     id: '2',
     type: 'text',
@@ -47,8 +56,13 @@ const initNodes: Node[] = [
 
 const initEdges: Edge[] = [
   {
-    id: 'e1-3',
+    id: 'e1-1a',
     source: '1',
+    target: '1a',
+  },
+  {
+    id: 'e1a-3',
+    source: '1a',
     target: '3',
   },
   {