Base Handle
A handle with some basic styling used for creating a shared design among all handles in your application.
Dependencies:
@xyflow/reactInstallation
Make sure to follow the prerequisites before installing the component.
npx shadcn@latest add https://ui-components-git-tooltip-node-refactor-xyflow.vercel.app/base-handleUsage
1. Copy the component into your app
import React, { memo } from "react";
import { NodeProps, Position } from "@xyflow/react";
import { BaseHandle } from "@/components/base-handle";
import { BaseNode } from "@/components/base-node";
const BaseHandleDemo = memo(({ selected }: NodeProps) => {
return (
<BaseNode selected={selected}>
<BaseHandle id="target-1" type="target" position={Position.Left} />
<div>A node with two handles</div>
<BaseHandle id="source-1" type="source" position={Position.Right} />
</BaseNode>
);
});
export default BaseHandleDemo;2. Connect the component with your React Flow application.
import { Background, ReactFlow } from "@xyflow/react";
import BaseHandle from "./component-example";
const defaultNodes = [
{
id: "1",
position: { x: 200, y: 200 },
data: {},
type: "baseHandle",
},
];
const nodeTypes = {
baseHandle: BaseHandle,
};
export default function App() {
return (
<div className="h-full w-full">
<ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
<Background />
</ReactFlow>
</div>
);
}