GitHub

Labeled Handle - React Flow

Dependencies:

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/labeled-handle


pnpm dlx shadcn@latest add https://ui.reactflow.dev/labeled-handle


yarn dlx shadcn@latest add https://ui.reactflow.dev/labeled-handle


bun x shadcn@latest add https://ui.reactflow.dev/labeled-handle

Usage

1. Copy the component into your app


import React, { memo } from "react";
import { Position } from "@xyflow/react";
 
import { LabeledHandle } from "@/components/labeled-handle";
import { BaseNode } from "@/components/base-node";
 
const LabeledHandleDemo

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
import LabeledHandleDemo from "./component-example";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: {},
    type: "labeledHandle",
  },
];