Node Appendix
A wrapper component for dynamically appending information to nodes in an absolutely positioned container.
Dependencies:
@xyflow/reactInstallation
Make sure to follow the prerequisites before installing the component.
npx shadcn@latest add https://ui.reactflow.dev/node-appendixUsage
1. Copy the component into your app
import { NodeAppendix } from "@/components/node-appendix";
import {
BaseNode,
BaseNodeContent,
BaseNodeHeader,
BaseNodeHeaderTitle,
} from "../base-node";
export const NodeAppendixDemo = () => {
return (
<BaseNode>
<NodeAppendix position="bottom" className="p-2">
Add custom content to the node appendix.
</NodeAppendix>
<BaseNodeHeader className="border-b">
<BaseNodeHeaderTitle>Custom Node</BaseNodeHeaderTitle>
</BaseNodeHeader>
<BaseNodeContent>
<p>Node Content goes here.</p>
</BaseNodeContent>
</BaseNode>
);
};2. Connect the component with your React Flow application.
import { Background, ReactFlow } from "@xyflow/react";
import { NodeAppendixDemo } from "./component-example";
const nodeTypes = {
appendixNode: NodeAppendixDemo,
};
const defaultNodes = [
{
id: "1",
position: { x: 200, y: 200 },
data: {},
type: "appendixNode",
},
];
export default function App() {
return (
<div className="h-full w-full">
<ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
<Background />
</ReactFlow>
</div>
);
}Examples
Last updated on