# react-flow-editor
> React component which enables creating flow editors with ease
Latest version **0.6.1** (published 2021-08-24) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-flow-editor
pnpm add react-flow-editor
yarn add react-flow-editor
bun add react-flow-editor
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.6.1 |
| Published | 2021-08-24 |
| First published | 2018-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 133 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Matthias Lochbrunner |
| Maintainers | lochbrunner |
## Links
- npm: https://www.npmjs.com/package/react-flow-editor
- Homepage: https://github.com/lochbrunner/react-flow-editor
- Issues: https://github.com/lochbrunner/react-flow-editor/issues
- npm.io page: https://npm.io/package/react-flow-editor
## Dependencies (3)
- [react](https://npm.io/package/react.md) ^16.13.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
## Recent versions
- 0.6.1 (latest) — 2021-08-24
- 0.4.3 — 2019-10-19
- 0.4.2 — 2019-03-25
- 0.4.1 — 2019-03-25
- 0.4.0 — 2019-03-25
- 0.3.7 — 2019-01-03
- 0.3.6 — 2019-01-02
- 0.3.5 — 2018-12-30
- 0.3.4 — 2018-12-30
- 0.3.3 — 2018-12-01
- 0.3.2 — 2018-11-29
- 0.3.1 — 2018-11-25
- 0.3.0 — 2018-11-17
- 0.2.1 — 2018-11-06
- 0.2.0 — 2018-10-14
- … 4 more at https://npm.io/package/react-flow-editor/versions
## 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!**
---
_Source: https://npm.io/package/react-flow-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._