![readme-header](https://user-images.githubusercontent.com/3797215/156259138-fb9f59f8-52f2-474a-b78c-6570867e4ead.svg#gh-light-mode-only)
Key Features
- Easy to use: Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
- Customizable: Different node and edge types and support for custom nodes with multiple handles and custom edges
- Fast rendering: Only nodes that have changed are re-rendered and only those in the viewport are displayed
- Hooks and Utils: Hooks for handling nodes, edges and the viewport and graph helper functions
- Plugin Components: Background, MiniMap and Controls
- Reliable: Written in Typescript and tested with cypress
Commercial Usage / Attribution
React Flow includes a small attribution that links to the React Flow website. We expect companies who are using React Flow commercially to subscribe to React Flow Pro if they want to remove the attribution. By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to sponsor us on Github.
You can find more information in our React Flow Pro FAQs.
Installation
The easiest way to get the latest version of React Flow is to install it via npm:
npm install reactflow
Quick Start
This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the website for guides, examples and API reference.
import ReactFlow, { MiniMap, Controls } from 'reactflow';
function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<MiniMap />
<Controls />
</ReactFlow>
);
}
Development
Before you can start developing please make sure that you have yarn classic installed (npm i -g yarn
). Then install the dependencies using yarn: yarn
.
For local development, you can use yarn dev
. This will run preconstruct and build all the packages.
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 web development agency with focus on data driven applications from Berlin. 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.
Credits
React Flow was initially developed for datablocks, a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries:
- d3-zoom - used for zoom, pan and drag interactions with the graph canvas
- d3-drag - used for making the nodes draggable
- zustand - internal state management
License
React Flow is MIT licensed.