Skip to main content

Quickstart

For folks who want to get React Flow up and running fast and figure out the details later, this is the site for you.

Installation

React Flow is published on npm as reactflow.

npm install reactflow

Basic Usage

The reactflow package exports the <ReactFlow /> React component as the default export. Additionally, it exports plugin components (like the MiniMap), hooks (like useReactFlow) and helper functions.

import { useCallback } from 'react';
import ReactFlow, {
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from 'reactflow';
// 👇 you need to import the reactflow styles
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>
);
}

Example Applications

To make it easier to get started, we created basic example apps that can be used as a starting point:

Codesandbox Templates