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

"use client";
 
import {
  Background,
  Handle,
  Node,
  NodeProps,
  Position,
  ReactFlow,
  useReactFlow,
} from "@xyflow/react";
 
import { useCallback } from "react";
import { DataEdge } from "@/components/data-edge";
import { BaseNode } from "@/components/base-node";
import { Button } from "@/components/ui/button";
import { Minus, Plus } from "lucide-react";
 
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<CounterNode>,
];
 
const edgeTypes = {
  dataEdge: DataEdge,
};
 
export default function DataEdgeDemo() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        nodeTypes={nodeTypes}
        defaultEdges={defaultEdges}
        edgeTypes={edgeTypes}
        fitView
      >
        <Background />
      </ReactFlow>
    </div>
  );
}
 
type CounterNode = Node<{ value: number }>;
 
function CounterNode({ id, data }: NodeProps<CounterNode>) {
  const { updateNodeData } = useReactFlow();
  const handleIncr = useCallback(() => {
    updateNodeData(id, ({ data }) => {
      if ("value" in data && typeof data.value === "number") {
        return { ...data, value: data.value + 1 };
      }
 
      return data;
    });
  }, [id, updateNodeData]);
  const handleDecr = useCallback(() => {
    updateNodeData(id, ({ data }) => {
      if ("value" in data && typeof data.value === "number") {
        return { ...data, value: data.value - 1 };
      }
 
      return data;
    });
  }, [id, updateNodeData]);
 
  return (
    <BaseNode className="flex items-center gap-4">
      <Button onClick={handleDecr} className="nopan nodrag size-6 p-1">
        <Minus />
      </Button>
      <pre>{String(data.value).padStart(2, " ")}</pre>
      <Button onClick={handleIncr} className="nopan nodrag size-6 p-1">
        <Plus />
      </Button>
      <Handle type="source" position={Position.Bottom} />
    </BaseNode>
  );
}

2. Connect the component with your React Flow application.

import DemoWrapper from "@/components/demo-wrapper";
import Demo from "@/registry/components/data-edge/demo";
 
export default function DemoPage() {
  return (
    <DemoWrapper>
      <Demo />
    </DemoWrapper>
  );
}

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