Skip to main content

Installation

Before you can start to use React Flow you need to install react-flow-renderer. It's published on npm and installable via:

npm install react-flow-renderer

Usage

The react-flow-renderer package exports the <ReactFlow /> React component as the default export and additional components (like MiniMap), hooks (like useReactFlow) and util functions. When you are importing the <ReactFlow /> component, the default styles get injected to the head. If you don't want to inject the styles, you can load the component via react-flow-renderer/nocss (more information in the theming section).

import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';

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

React Flow can also be used as an uncontrolled component without external state management:

import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';

function Flow({ nodes, edges }) {
return (
<ReactFlow defaultNodes={nodes} defaultEdges={edges}>
<MiniMap />
<Controls />
</ReactFlow>
);
}

Terms

In the docs we are using the following terms for the parts of a flow:

  • Node: A node is a draggable block that can be connected with other nodes.
  • Edge: An edge is a connection between two nodes.
  • Handle: A handle is a kind of port of a node that is used to connect nodes. You start a connection at a handle and end it on another one.
  • Connection Line: The connection line is the line that gets drawn while you connect two nodes with each other.
  • Transform: Used to describe the current viewport of the pane. It's an array with three numbers: [x, y, zoom].