import React, { memo } from "react";
import { NodeProps, Position } from "@xyflow/react";

import { LabeledHandle } from "@/components/labeled-handle";
import { BaseNode } from "@/components/base-node";

const LabeledHandleDemo = memo(({ selected }: NodeProps) => {
  return (
    <BaseNode className="flex px-0 py-5" selected={selected}>
      <LabeledHandle
        id="target-1"
        title="Some Input"
        type="target"
        position={Position.Left}
      />
      <LabeledHandle
        id="source-1"
        title="Some Output"
        type="source"
        position={Position.Right}
      />
    </BaseNode>
  );
});

export default LabeledHandleDemo;


import React, { forwardRef, HTMLAttributes } from "react";
import { cn } from "@/lib/utils";
import { HandleProps } from "@xyflow/react";

import { BaseHandle } from "@/registry/components/base-handle";

const flexDirections = {
  top: "flex-col",
  right: "flex-row-reverse justify-end",
  bottom: "flex-col-reverse justify-end",
  left: "flex-row",
};

export const LabeledHandle = forwardRef<
  HTMLDivElement,
  HandleProps &
    HTMLAttributes<HTMLDivElement> & {
      title: string;
      handleClassName?: string;
      labelClassName?: string;
    }
>(
  (
    { className, labelClassName, handleClassName, title, position, ...props },
    ref,
  ) => (
    <div
      ref={ref}
      title={title}
      className={cn(
        "relative flex items-center",
        flexDirections[position],
        className,
      )}
    >
      <BaseHandle position={position} className={handleClassName} {...props} />
      <label className={cn("px-3 text-foreground", labelClassName)}>
        {title}
      </label>
    </div>
  ),
);

LabeledHandle.displayName = "LabeledHandle";


Labeled Handle

Installation

Usage

1. Copy the component into your app

2. Connect the component with your React Flow application.