All Projects → lochbrunner → React Flow Editor

lochbrunner / React Flow Editor

Licence: mit
React component which enables creating flow editors with ease

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Flow Editor

React Pro Sidebar
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus
Stars: ✭ 359 (+226.36%)
Mutual labels:  react-component, scss
Peridot
A fast and powerful Vue.js PWA boilerplate
Stars: ✭ 111 (+0.91%)
Mutual labels:  scss
Syntax Highlighting
collection of syntax highlighting colorschemes
Stars: ✭ 105 (-4.55%)
Mutual labels:  scss
Lightning Admin Angular
A mobile first design of a responsive admin template built with angular and bootstrap
Stars: ✭ 107 (-2.73%)
Mutual labels:  scss
React Color
🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
Stars: ✭ 10,287 (+9251.82%)
Mutual labels:  react-component
Plate
Plate: a super stripped-down WordPress starter theme for developers.
Stars: ✭ 110 (+0%)
Mutual labels:  scss
Tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: ✭ 2,305 (+1995.45%)
Mutual labels:  react-component
Lemonj
一个面向 CSS/LESS/SCSS 的分析、坏味道检查和自动化重构工具。
Stars: ✭ 112 (+1.82%)
Mutual labels:  scss
React Native Interactive Image Gallery
🖼 A React Native component to display a gallery of images.
Stars: ✭ 111 (+0.91%)
Mutual labels:  react-component
Maz Ui
Stand-alone components library to build your interfaces with Vue.JS & Nuxt.JS
Stars: ✭ 109 (-0.91%)
Mutual labels:  scss
React Stepper
Well-designed stepper component for react
Stars: ✭ 108 (-1.82%)
Mutual labels:  react-component
Prettier
Prettier is an opinionated code formatter.
Stars: ✭ 41,411 (+37546.36%)
Mutual labels:  scss
Metro For Discord
Make your Discord client look like a UWP app.
Stars: ✭ 109 (-0.91%)
Mutual labels:  scss
Documentation
Full documentation repository for Mastodon
Stars: ✭ 1,450 (+1218.18%)
Mutual labels:  scss
Responsive Sidebar Navigation
An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.
Stars: ✭ 111 (+0.91%)
Mutual labels:  scss
React Image Fallback
stop displaying broken images, have another image to fallback on.
Stars: ✭ 106 (-3.64%)
Mutual labels:  react-component
Griddd
A dead simple, customisable, flexbox-based griddd
Stars: ✭ 108 (-1.82%)
Mutual labels:  scss
Light Blue Dashboard
🔥 Free and open-source admin dashboard template built with Bootstrap
Stars: ✭ 110 (+0%)
Mutual labels:  scss
React Currency Input Field
React component for an input field
Stars: ✭ 111 (+0.91%)
Mutual labels:  react-component
Openrefine.github.com
Github pages repository for OpenRefine account
Stars: ✭ 111 (+0.91%)
Mutual labels:  scss

npm version Downloads GitHub issues David David lib examples

Graph editor

An ui library for creating flow based editors with react and typescript/javascript.

Screen Video

Try the demo in your browser.

If you are interested in redux dive into the example or try the more advanced demo.

Getting started

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 <h2 />;
    return (
        <p>{data.payload.h1}</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.

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

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

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;
}

Themes

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.

Postcss support

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.

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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].