3.4 KiB
Wire Your Ideas With React Flow!
A highly customizable React component for building interactive graphs and node-based editors.
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} />;
Community Packages
- useUndoable - Hook for undo/redo functionality with an explicit React Flow example
- react-flow-smart-edge - Custom edge that doesn't intersect with nodes
- Feliz.ReactFlow - Feliz React Bindings for React Flow
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
Maintainers
React Flow is developed and maintained by webkid, a data visualization studio from Berlin. It was initially developed for datablocks, a graph-based editor for transforming, analyzing and visualizing data in your browser. If you need help or want to talk to us about a collaboration, feel free to contact us:
You can also use our contact form or join the React Flow Discord Server.