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

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

// You can use Handle components only inside of custom nodes.
const CustomNode = memo(({ selected }: NodeProps) => {
  return (
    <BaseNode className="flex px-0 py-5" selected={selected}>
      <BaseHandle id="target-1" type="target" position={Position.Left} />
      <div className="mx-10">A node with two handles</div>
      <BaseHandle id="source-1" type="source" position={Position.Right} />
    </BaseNode>
  );
});

CustomNode.displayName = "BaseHandleDemo";

export default CustomNode;


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

export const BaseHandle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & HandleProps
>(({ className, ...props }, ref) => (
  <Handle ref={ref} className={cn("", className)} {...props} />
));
BaseHandle.displayName = "BaseHandle";


Base Node

Installation