reactflow

What is reactflow?

React Flow is a library for building node-based editors and diagrams. It provides a set of components and utilities to create interactive and customizable flow charts, process diagrams, and more.

What are reactflow's main functionalities?

Creating a Basic Flow

This code demonstrates how to create a basic flow chart with nodes and edges using React Flow. The `elements` array defines the nodes and edges, and the `ReactFlow` component renders them.

import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

const elements = [
  { id: '1', type: 'input', data: { label: 'Start' }, position: { x: 250, y: 0 } },
  { id: '2', data: { label: 'Step 1' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Step 2' }, position: { x: 400, y: 100 } },
  { id: '4', type: 'output', data: { label: 'End' }, position: { x: 250, y: 200 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e2-3', source: '2', target: '3' },
  { id: 'e3-4', source: '3', target: '4' }
];

function FlowChart() {
  return <ReactFlow elements={elements} />;
}

export default FlowChart;

Custom Node Types

This code demonstrates how to create custom node types in React Flow. The `CustomNode` component defines the custom node, and the `nodeTypes` object maps the custom node type to the component.

import ReactFlow, { Handle } from 'reactflow';
import 'reactflow/dist/style.css';

const CustomNode = ({ data }) => {
  return (
    <div style={{ padding: 10, border: '1px solid #ddd', borderRadius: 5 }}>
      <Handle type="target" position="top" />
      <div>{data.label}</div>
      <Handle type="source" position="bottom" />
    </div>
  );
};

const nodeTypes = { custom: CustomNode };

const elements = [
  { id: '1', type: 'custom', data: { label: 'Custom Node' }, position: { x: 250, y: 0 } }
];

function CustomNodeFlow() {
  return <ReactFlow elements={elements} nodeTypes={nodeTypes} />;
}

export default CustomNodeFlow;

Interactive Features

This code demonstrates how to add interactive features to a flow chart in React Flow. It includes a MiniMap, Controls, and Background components, and allows users to connect nodes interactively.

import React, { useState } from 'react';
import ReactFlow, { addEdge, MiniMap, Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const initialElements = [
  { id: '1', type: 'input', data: { label: 'Start' }, position: { x: 250, y: 0 } },
  { id: '2', data: { label: 'Step 1' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Step 2' }, position: { x: 400, y: 100 } },
  { id: '4', type: 'output', data: { label: 'End' }, position: { x: 250, y: 200 } }
];

function InteractiveFlow() {
  const [elements, setElements] = useState(initialElements);
  const onConnect = (params) => setElements((els) => addEdge(params, els));

  return (
    <ReactFlow elements={elements} onConnect={onConnect}>
      <MiniMap />
      <Controls />
      <Background />
    </ReactFlow>
  );
}

export default InteractiveFlow;

Other packages similar to reactflow

dagre-d3

Dagre-D3 is a library for rendering directed graphs using D3.js. It provides a way to create and layout directed graphs, but it requires more manual setup and customization compared to React Flow.

cytoscape

Cytoscape.js is a graph theory library for visualization and analysis. It offers a wide range of features for creating and manipulating graphs, but it has a steeper learning curve and is more complex than React Flow.

jointjs

JointJS is a diagramming library that provides a flexible way to create and interact with diagrams. It offers more advanced features and customization options, but it can be more challenging to integrate with React compared to React Flow.

README

A highly customizable React component for building interactive graphs and node-based editors.

🚀 Getting Started | 📖 Documentation | 📺 Examples | ☎️ Discord | 💎 React Flow Pro

---

🚨 Upcoming Changes

The main branch (v11) is now in a feature freeze. The next version is being developed in the xyflow branch. Find out more about the those changes here.

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

Are you using React Flow for a personal project? Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟

Are you using React Flow at your organization and making money from it? Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the React Flow Pro website or through Github Sponsors.

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, yarn or pnpm:

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 { useCallback } from 'react';
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];

const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
    >
      <MiniMap />
      <Controls />
      <Background />
    </ReactFlow>
  );
}

Development

Before you can start developing please make sure that you have pnpm installed (npm i -g pnpm). Then install the dependencies using pnpm: pnpm install.

For local development, you can use pnpm dev.

Testing

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

pnpm 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:

• Moritz Klack • Twitter • Github
• Christopher Möller • Twitter • Github

You can also use our contact form or join the React Flow Discord Server.

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

Credits

React Flow was initially developed for datablocks, a graph-based editor for transforming, analyzing and visualizing data in the 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.