"use client";

import {
  Background,
  ReactFlow,
} from "@xyflow/react";
import { PlaceholderNode } from "@/components/placeholder-node"; 

const nodeTypes = {
  placeholder: PlaceholderNode,
};


const defaultNodes = [
  {
    id: '1',
    data: { label: 'Original Node' },
    position: { x: 0, y: 0 },
    type: 'default',
  },
  {
    id: '2',
    data: { label: '+' }, 
    position: { x: 0, y: 150 },
    type: 'placeholder',
  },
];

const defaultEdges = [
  {
    id: '1=>2',
    source: '1',
    target: '2',
    type: 'default',
    animated: true,
  },
];

export default function Demo() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        defaultEdges={defaultEdges}
        nodeTypes={nodeTypes}
        nodeClickDistance={5}
        fitView
      >
        <Background />
      </ReactFlow>
    </div>
  );
}


import React from "react";
import { useReactFlow, Handle, Position, NodeProps, Node } from "@xyflow/react";
import { BaseNode } from "@/registry/components/base-node"; 

type PlaceholderNodeData = Node<{
  label: string;
}>;

export function PlaceholderNode({ data, id, selected }: NodeProps<PlaceholderNodeData>) {
  
  const { setNodes, setEdges } = useReactFlow();

  const handleClick = () => {
    setEdges((edges) =>
      edges.map((edge) =>
        edge.target === id ? { ...edge, animated: false } : edge
      )
    );

    setNodes((nodes) => {
      const updatedNodes = nodes.map((node) => {
        if (node.id === id) {
          return {
            ...node,
            data: { ...node.data, label: "New Node" }, 
            type: "default",
          };
        }
        return node;
      });
      return updatedNodes;
    });
  };

  return (
    <BaseNode
      id={id}
      selected={selected}
      className="bg-card text-center w-[150px] border-dashed border-gray-400 text-gray-400 shadow-none p-2"
      onClick={handleClick}
    >
      {data.label}
      <Handle
        type="target"
        style={{ visibility: 'hidden' }} 
        position={Position.Top}
        isConnectable={false} 
      />
      <Handle
        type="source"
        style={{ visibility: 'hidden' }} 
        position={Position.Bottom}
        isConnectable={false}
      />
    </BaseNode>
  );
}

PlaceholderNode.displayName = "PlaceholderNode";


Placeholder Node

Installation

Usage

1. Copy the component into your app

2. Connect the component with your React Flow application.