https://github.com/lochbrunner/react-flow-editor
React component which enables creating flow editors with ease
https://github.com/lochbrunner/react-flow-editor
flow-based-programming react react-component scss typescript
Last synced: 9 months ago
JSON representation
React component which enables creating flow editors with ease
- Host: GitHub
- URL: https://github.com/lochbrunner/react-flow-editor
- Owner: lochbrunner
- License: mit
- Created: 2018-08-22T20:44:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:58:10.000Z (about 3 years ago)
- Last Synced: 2025-03-31T06:06:54.213Z (10 months ago)
- Topics: flow-based-programming, react, react-component, scss, typescript
- Language: TypeScript
- Size: 15.9 MB
- Stars: 197
- Watchers: 8
- Forks: 21
- Open Issues: 84
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/react-flow-editor)
[](https://www.npmjs.com/package/react-flow-editor)
[](https://github.com/lochbrunner/react-flow-editor/issues)
# Graph editor
An ui library for creating flow based editors with react and typescript/javascript.
Try the [demo](https://lochbrunner.github.io/react-flow-editor/simple) in your browser.
If you are interested in *redux* dive into the [example](./example/redux/) or try the more advanced [demo](https://lochbrunner.github.io/react-flow-editor/redux/index.html).
## Getting started
```typescript
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(data: any): JSX.Element {
if (data.type === '') return
;
return (
{data.payload.h1}
);
}
const config: Config = {
resolver,
connectionType: 'bezier',
grid: true,
demoMode: true,
};
ReactDOM.render(
,
document.getElementById('root')
);
```
See [example](./example/) for usage.
## Side effects
* 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.onStartCreatingNewNode` to communicate.
## API
### Configuration
The config interface looks as follow
```typescript
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. |
### Nodes
A node is specified by the following interface
```typescript
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:
```typescript
export interface Port {
name: string;
connection?: Connection|Connection[];
payload?: any;
renderer?: (connection: Port) => JSX.Element;
}
```
```typescript
export interface Connection {
nodeId: string;
port: number;
classNames?: string[];
notes?: string;
}
```
### Themes
By default we recommend to import the default theme with
```sass
@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.
### Postcss support
When using postcss generated class names just forward them with
```ts
import * as style from './style.scss';
// ...
const config: Config = {
resolver,
connectionType: 'bezier',
grid: true,
demoMode: true,
direction: 'we',
style
};
// ...
```
See [Example](./example/postcss).
## Roadmap
* Editing the title of the node
* Grouping nodes (similar to *Blender*)
* Optimize hooking
* Fix zooming and scrolling
## Contributing
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!**