reactflow

Creating a Basic Flow

This code demonstrates how to create a basic flow chart with nodes and edges using React Flow. The `elements` array defines the nodes and edges, and the `ReactFlow` component renders them.

import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

const elements = [
  { id: '1', type: 'input', data: { label: 'Start' }, position: { x: 250, y: 0 } },
  { id: '2', data: { label: 'Step 1' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Step 2' }, position: { x: 400, y: 100 } },
  { id: '4', type: 'output', data: { label: 'End' }, position: { x: 250, y: 200 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e2-3', source: '2', target: '3' },
  { id: 'e3-4', source: '3', target: '4' }
];

function FlowChart() {
  return <ReactFlow elements={elements} />;
}

export default FlowChart;

Custom Node Types

This code demonstrates how to create custom node types in React Flow. The `CustomNode` component defines the custom node, and the `nodeTypes` object maps the custom node type to the component.

import ReactFlow, { Handle } from 'reactflow';
import 'reactflow/dist/style.css';

const CustomNode = ({ data }) => {
  return (
    <div style={{ padding: 10, border: '1px solid #ddd', borderRadius: 5 }}>
      <Handle type="target" position="top" />
      <div>{data.label}</div>
      <Handle type="source" position="bottom" />
    </div>
  );
};

const nodeTypes = { custom: CustomNode };

const elements = [
  { id: '1', type: 'custom', data: { label: 'Custom Node' }, position: { x: 250, y: 0 } }
];

function CustomNodeFlow() {
  return <ReactFlow elements={elements} nodeTypes={nodeTypes} />;
}

export default CustomNodeFlow;

Interactive Features

This code demonstrates how to add interactive features to a flow chart in React Flow. It includes a MiniMap, Controls, and Background components, and allows users to connect nodes interactively.

import React, { useState } from 'react';
import ReactFlow, { addEdge, MiniMap, Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const initialElements = [
  { id: '1', type: 'input', data: { label: 'Start' }, position: { x: 250, y: 0 } },
  { id: '2', data: { label: 'Step 1' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Step 2' }, position: { x: 400, y: 100 } },
  { id: '4', type: 'output', data: { label: 'End' }, position: { x: 250, y: 200 } }
];

function InteractiveFlow() {
  const [elements, setElements] = useState(initialElements);
  const onConnect = (params) => setElements((els) => addEdge(params, els));

  return (
    <ReactFlow elements={elements} onConnect={onConnect}>
      <MiniMap />
      <Controls />
      <Background />
    </ReactFlow>
  );
}

export default InteractiveFlow;