alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve return type of useNodesdata

Browse Source
This commit is contained in:
peterkogo
2026-02-10 10:58:51 +01:00
parent be40c34010
commit ce6c869df4
7 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/react/src/examples/UseNodesData/TextNode.tsx
View File

@@ -1,7 +1,8 @@
import { memo, useState } from 'react';
import { Position, NodeProps, Handle, useReactFlow } from '@xyflow/react';
import type { TextNode } from '.';
function TextNode({ id, data }: NodeProps) {
function TextNode({ id, data }: NodeProps<TextNode>) {
const { updateNodeData } = useReactFlow();
const [text, setText] = useState(data.text);
const updateText = (text: string) => {

10
examples/react/src/examples/UseNodesData/UppercaseNode.tsx
View File

@@ -1,18 +1,18 @@
import { memo, useEffect } from 'react';
import { Position, NodeProps, useReactFlow, Handle, useNodeConnections, useNodesData } from '@xyflow/react';
import { isTextNode, type TextNode, type MyNode } from '.';
import { isTextNode, type TextNode, type MyNode, type UppercaseNode } from '.';
function UppercaseNode({ id }: NodeProps) {
function UppercaseNode({ id }: NodeProps<UppercaseNode>) {
const { updateNodeData } = useReactFlow();
const connections = useNodeConnections({
handleType: 'target',
});
const nodesData = useNodesData<MyNode>(connections[0]?.source);
const textNode = isTextNode(nodesData) ? nodesData : null;
useEffect(() => {
updateNodeData(id, { text: textNode?.data.text.toUpperCase() });
}, [textNode]);
const text = nodesData?.type === 'text' ? nodesData?.data.text.toUpperCase() : undefined;
updateNodeData(id, { text });
}, [nodesData]);
return (
<div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>

11
examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
View File

@@ -8,22 +8,21 @@
type Node,
type NodeProps
} from '@xyflow/svelte';
import { isTextNode, type MyNode } from './+page.svelte';
import { type MyNode } from './+page.svelte';
let { id }: NodeProps<Node<{ text: string }>> = $props();
const { updateNodeData } = useSvelteFlow();
const connections = useNodeConnections({
id: id,
handleType: 'target'
});
let nodeData = $derived(useNodesData<MyNode>(connections.current[0]?.source));
let textNodeData = $derived(isTextNode(nodeData.current) ? nodeData.current.data.text : null);
let nodesData = $derived(useNodesData<MyNode>(connections.current[0]?.source));
$effect.pre(() => {
const input = textNodeData?.toUpperCase() ?? '';
updateNodeData(id, { text: input });
const text =
nodesData.current?.type === 'text' ? nodesData.current?.data.text.toUpperCase() : undefined;
updateNodeData(id, { text });
});
</script>