Skip to Content
ComponentsEdges

Data Edge

An edge that displays one field from the source node’s data object.

Dependencies:
@xyflow/react

Installation

Make sure to follow the prerequisites before installing the component.

npx shadcn@latest add https://ui.reactflow.dev/data-edge

Usage

1. Copy the component into your app

import { Handle, NodeProps, Position, useReactFlow, Node } from "@xyflow/react"; import { memo } from "react"; import { BaseNode } from "@/components/base-node"; import { Slider } from "@/components/ui/slider"; export type CounterNodeType = Node<{ value: number }>; export const CounterNode = memo(({ id, data }: NodeProps<CounterNodeType>) => { const { updateNodeData } = useReactFlow(); return ( <BaseNode> <Slider value={[data.value]} min={0} max={100} step={1} className="nopan nodrag w-24" onValueChange={([value]) => { updateNodeData(id, (node) => ({ ...node.data, value, })); }} /> <Handle type="source" position={Position.Bottom} /> </BaseNode> ); });

2. Connect the component with your React Flow application.

import { Background, ReactFlow } from "@xyflow/react"; import { CounterNode, type CounterNodeType } from "./component-example"; import { DataEdge } from "@/registry/components/data-edge/"; const defaultNodes = [ { id: "1", position: { x: 100, y: 100 }, type: "counterNode", data: { value: 10 }, }, { id: "2", position: { x: 300, y: 300 }, data: { label: "Output" }, }, ]; const nodeTypes = { counterNode: CounterNode, }; const defaultEdges = [ { id: "1->2", source: "1", target: "2", type: "dataEdge", data: { key: "value" }, } satisfies DataEdge<CounterNodeType>, ]; const edgeTypes = { dataEdge: DataEdge, }; export default function App() { return ( <div className="h-full w-full"> <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} defaultEdges={defaultEdges} edgeTypes={edgeTypes} fitView > <Background /> </ReactFlow> </div> ); }

Additional type safety

When creating new edges of this type, you can use TypeScript’s satisfies predicate along with the specific type of a node in your application to ensure the key property of the edge’s data is a valid key of the node’s data.

type CounterNode = Node<{ count: number }>; const initialEdges = [ { id: 'edge-1', source: 'node-1', target: 'node-2', type: 'dataEdge', data: { key: 'count', } satisfies DataEdge<CounterNode>, }, ];

If you try to use a key that is not present in the node’s data, TypeScript will show an error message like:

ts: Type ‘“value”’ is not assignable to type ‘“count”’.

Last updated on