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