Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
"use client";
import "@xyflow/react/dist/style.css";
import { Background, ReactFlow, ReactFlowProvider } from "@xyflow/react";
import { StatusEdge } from "@/components/ui/flow/status-edge";
const defaultNodes = [
{
id: "1",
position: { x: 200, y: 200 },
data: { label: "Node" },
},
{
id: "2",
position: { x: 400, y: 400 },
data: { label: "Node" },
},
];
const defaultEdges = [
{
id: "e1-2",
source: "1",
target: "2",
type: "status",
data: {
error: true,
},
},
];
const edgeTypes = {
status: StatusEdge,
};
export function StatusEdgeDemo() {
const defaultViewport = { x: -100, y: -100, zoom: 1.1 };
return (
<div className="w-full h-full">
<ReactFlowProvider>
<ReactFlow
defaultNodes={defaultNodes}
defaultEdges={defaultEdges}
edgeTypes={edgeTypes}
defaultViewport={defaultViewport}
>
<Background />
</ReactFlow>
</ReactFlowProvider>
</div>
);
}
Overview
The Status Edge is a simple React Flow edge component that provides visual feedback through color coding. It provides:
- Color-coded states for different conditions:
- Red for error state
- Gray for default state
- Smooth transitions between states
- Built on React Flow's BaseEdge component
Components Used
This edge is built using React Flow Components:
- Base Edge - For the core edge structure
- getBezierPath - For calculating the curved edge path
Installation
pnpm dlx shadcn@latest add @simple-ai/status-edge
Usage
The Status Edge is designed to provide visual feedback for connections in your flow. Here's how to use it in your React Flow application:
// Example usage of the Status Edge
const edges = [
{
id: "e1-2",
source: "1",
target: "2",
type: "status",
data: {
error: true // Set to true to show error state
}
}
];
// Register the edge type
const edgeTypes = {
status: StatusEdge,
};