Base Node
A node wrapper with some basic styling used for creating a shared design among all nodes 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-nodeUsage
1. Copy the component into your app
import { memo } from "react";
import { NodeProps } from "@xyflow/react";
import { BaseNode } from "@/components/base-node";
const BaseNodeDemo = memo(({ selected }: NodeProps) => {
return (
<BaseNode selected={selected}>
<div>Base Node</div>
</BaseNode>
);
});
export default BaseNodeDemo;2. Connect the component with your React Flow application.
import { Background, ReactFlow } from "@xyflow/react";
import BaseNode from "./component-example";
const nodeTypes = {
baseNode: BaseNode,
};
const defaultNodes = [
{
id: "1",
position: { x: 200, y: 200 },
data: {},
type: "baseNode",
},
];
export default function App() {
return (
<div className="h-full w-full">
<ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
<Background />
</ReactFlow>
</div>
);
}