ComponentsEdgesEdge with Node Data

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-components-git-tooltip-node-refactor-xyflow.vercel.app/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”’.

Edge with ButtonAnimated SVG Edge