Placeholder Node

A custom node that can be clicked to create a new node.

Dependencies:

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/placeholder-node


pnpm dlx shadcn@latest add https://ui.reactflow.dev/placeholder-node


yarn dlx shadcn@latest add https://ui.reactflow.dev/placeholder-node


bun x shadcn@latest add https://ui.reactflow.dev/placeholder-node

Usage

1. Copy the component into your app


import { memo } from "react";
import { NodeProps } from "@xyflow/react";
import { PlaceholderNode } from "@/components/placeholder-node";
 
const PlaceholderNodeDemo = memo(({ selected }: NodeProps) => {
  return (
    <PlaceholderNode selected={selected}>
      <div>+</div>
    </PlaceholderNode>
  );
});
 
export default PlaceholderNodeDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
import PlaceholderNodeDemo from "./component-example";
 
const nodeTypes = {
  placeholderNode: PlaceholderNodeDemo,
};
 
const defaultNodes = [
  {
    id: "1",
    data: { label: "Original Node" },
    position: { x: 0, y: 0 },
    type: "default",
  },
  {
    id: "2",
    data: {},
    position: { x: 0, y: 150 },
    type: "placeholderNode",
  },
];
 
const defaultEdges = [
  {
    id: "1=>2",
    source: "1",
    target: "2",
    type: "default",
    animated: true,
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        defaultEdges={defaultEdges}
        nodeTypes={nodeTypes}
        nodeClickDistance={5}
        fitView
      >
        <Background />
      </ReactFlow>
    </div>
  );
}