An ui library for creating flow based editors with react and typescript/javascript.
Try the demo in your browser.
If you are interested in redux dive into the example or try the more advanced demo.
import * as ReactDOM from 'react-dom';
import { Editor, Node, Config} from 'react-flow-editor';
// Create the initial graph
const nodes: Node[] = [
{
id: 'Node 1',
name: 'First Node',
payload: { h1: 'hello' },
inputs: [{
connection: [], name: 'input 1'
}],
outputs: []
}];
// Renders the body of each node
function resolver(payload: any): JSX.Element {
if (payload.type === '') return <h2 />;
return (
<p>{payload}</p>
);
}
const config: Config = {
resolver,
connectionType: 'bezier',
grid: true,
demoMode: true,
};
ReactDOM.render(
<div>
<Editor config={config} nodes={nodes} />
</div>,
document.getElementById('root')
);See example for usage.
- Before creating new nodes, the node under the cursor is a direct child of
document.body. - In order to decouple editor and menu components they use
window.onStartCreatingNewNodeto communicate.
The config interface looks as follow
export interface Config {
resolver: (payload: any) => JSX.Element;
connectionValidator?: (output: { nodeId: string, port: number }, input: { nodeId: string, port: number }) => boolean;
onChanged?: (node: ChangeAction) => void;
connectionType?: 'bezier' | 'linear';
grid?: boolean | { size: number };
connectionAnchorsLength?: number;
direction?: 'ew' | 'we';
demoMode?: boolean;
}| Property | Description |
|---|---|
resolver |
A function returning a React component which gets placed into the node |
connectionValidator |
A function which evaluates if a possible connection might be valid or not |
onChanged |
A callback which gets called when the flow graph changed |
connectionType |
The geometry type of the connection lines between the nodes |
grid |
Specifies if the grid should be rendered or not (Default is true). Optional specifies distances between the lines (size). Default is 18. |
connectionAnchorsLength |
Specifies the langth of the anker when using bezier as connectionType. |
direction |
Specifies the orientation of the input and output ports. Default is we. |
demoMode |
If this set to true, the Editor takes care of updating the nodes in the props. Be carful using this in production. |
A node is specified by the following interface
export interface Node {
name: string;
type: string;
id: string;
inputs: InputPort[];
outputs: OutputPort[];
payload?: any;
position?: Vector2d;
properties?: {display: 'stacked' | 'only-dots'};
classNames?: string[];
style: Style;
}For now InputPort and OutputPort are identically to the Port interface:
export interface Port {
name: string;
connection?: Connection|Connection[];
payload?: any;
renderer?: (connection: Port) => JSX.Element;
}export interface Connection {
nodeId: string;
port: number;
classNames?: string[];
notes?: string;
}By default we recommend to import the default theme with
@import "react-flow-editor/dist/default-theme.scss";But you can change the style of all components by coping that file and adjust its values.
When using postcss generated class names just forward them with
import * as style from './style.scss';
// ...
const config: Config = {
resolver,
connectionType: 'bezier',
grid: true,
demoMode: true,
direction: 'we',
style
};
// ...See Example.
- Editing the title of the node
- Grouping nodes (similar to Blender)
- Optimize hooking
- Fix zooming and scrolling
This library is very young. So please consider that it might have some bugs, but I will try to fix them, when they get reported.
If you have any problems or miss an important feature:
Feel free to create a PR or report an issue!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent