Introduction

A highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.

demo1 demo2

Try it out

https://react-flow-builder.web.cloudendpoint.cn/

Installation

yarn add react-flow-builder

or

npm install react-flow-builder

Usage

import React, { useState } from 'react';
import FlowBuilder from 'react-flow-builder';

const registerNodes = [
  {
    type: 'start',
    name: 'start',
  },
  {
    type: 'end',
    name: 'end',
  },
  {
    type: 'common',
    name: 'common',
  },
  {
    type: 'branch',
    name: 'branch',
    conditionNodeType: 'condition',
  },
  {
    type: 'condition',
    name: 'condition',
  },
];

export default function () {
  const [nodes, setNodes] = useState([]);
  return (
    <FlowBuilder
      registerNodes={registerNodes}
      nodes={nodes}
      onChange={setNodes}
    />
  );
}

API

FlowBuilder

Property Description Type Required Default
backgroundColor The color of background string #F7F7F7
className The class name of the container string
drawerProps Extra props of Drawer Component from antd. visible and onClose have already in FlowBuilder, and {title: “Configuration”, width: 480, destroyOnClose: true, maskClosable: false}
layout Use vertical or horizontal layout vertical | horizontal vertical
lineColor The color of line string #999999
registerNodes The registered nodes RegisterNode[]
spaceX Horizontal spacing between nodes number 16
spaceY Vertical spacing between nodes number 16
nodes The nodes of FlowBuilder Node[]
onChange Callback function for when the data change (nodes: Node[], changeEvent?: string) => void

RegisterNode

Property Description Type Required Default
addIcon The icon in addable node list (There are already some default icons) React.ReactNode
conditionNodeType The type of condition node string
configComponent The Component of configuring node form React.FC<ConfigComponent>
deleteConfirmTitle The confirmation information before deleting the node. The title of Popconfirm string Are you sure to delete this node?
displayComponent The Component of displaying node React.FC<DisplayComponent>
extraData The extra data of the node any
name The name of node string
type The type of node, promise start is start node type and end is end node type string

DisplayComponent

Property Description Type Default
node The all information of node Node

ConfigComponent

Property Description Type Default
node The all information of node Node
onCancel Called on cancel, used to close the drawer () => void
onSave Called on save node data (automatically close the drawer, no need to call onCancel). FlowBuilder will set the validateStatusError property according to validateErrors (values: any, validateErrors?: any) => void

Node

Property Description Type Default
branchs The condition nodes array of branch node Node[]
configuring Whether configuring of node. The display Component can highlight the node according to this property boolean
data The data of node any
extraData The extra data of node. Same as the extraData of the registered node, not deep clone any
id The unique id of node string
name The name of node. Same as the name of the registered node string
next The next flow of condition node Node[]
path The full path in FlowBuilder any[]
type The type of node. Same as the type of the registered node string
validateStatusError The Component of configuring node form validate failed. The display Component can highlight the node according to this property boolean

GitHub

View Github