Skip to content
forked from xyflow/xyflow

Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams

License

Notifications You must be signed in to change notification settings

vikadata/react-flow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b68ac61 · Oct 27, 2021
Apr 29, 2021
Oct 15, 2019
Jan 20, 2021
Oct 5, 2021
Oct 14, 2021
Jan 19, 2021
Oct 27, 2021
Oct 21, 2020
Oct 7, 2020
Jun 16, 2021
May 15, 2020
Jan 11, 2021
Jun 3, 2020
Nov 2, 2020
May 4, 2020
Oct 20, 2020
Apr 24, 2021
May 4, 2020
Apr 19, 2021
Aug 3, 2020
Oct 14, 2021
Oct 26, 2021
Dec 7, 2020
Oct 22, 2019
Feb 25, 2021
Feb 25, 2021

Repository files navigation

react-flow

React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls. Feel free to check out the examples or read the blog post to get started.

React Flow was initially created for datablocks. A node-based editor for transforming, analyzing and visualizing data.

Installation

npm install react-flow-renderer

Quick Start

This is a very basic example of how to use React Flow. You can find more advanced examples on the website.

import React from 'react';
import ReactFlow from 'react-flow-renderer';

const elements = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
  // you can also pass a React component as a label
  { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
];

const BasicFlow = () => <ReactFlow elements={elements} />;

Development

Before you start you need to install the React Flow dependencies via npm install and the ones of the examples cd example && npm install.

If you want to contribute or develop custom features the easiest way is to start the dev server:

npm start

and the example app via:

cd example && npm start 

The example app serves the content of the example folder and watches changes inside the src folder. The examples are using the source of the src folder.

Testing

Testing is done with cypress. You can find the tests in the integration/flow folder. In order to run the tests do:

npm run test

Maintainer

Moritz Klack • TwitterGithub

Support

If you need custom support or features for your application we are happy to hear from you.

Thanks!

Special thanks to Andy Lindemann for a lot of helpful contributions!


React Flow is maintained by webkid, a data visualization agency from Berlin. If you need help or want to develop react-based tools or data visualizations, get in touch!

About

Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 87.4%
  • JavaScript 9.5%
  • CSS 3.0%
  • HTML 0.1%