Introduction
A highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.
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