This library was modified by me to provide a behaviour described in this issue. I achieved it by adding a fitViewToDimensions
function in src\hooks\useZoomPanHelper.ts
. It takes nodes and container dimensions as arguments instead of getting them from store. This way you can pass them yourself, an they will always be up to date.
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.
- Website: https://reactflow.dev
- Documentation: https://reactflow.dev/docs
- Examples: https://reactflow.dev/examples
- Website/Docs Repository: https://github.com/wbkd/react-flow-docs
- Community: https://discord.gg/Bqt6xrs
React Flow was initially created for datablocks. A node-based editor for transforming, analyzing and visualizing data.
npm install react-flow-renderer
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} />;
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 is done with cypress. You can find the tests in the integration/flow
folder. In order to run the tests do:
npm run test
Moritz Klack • Twitter • Github
If you need custom support or features for your application we are happy to hear from you.
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!