Built-In Components
React Flow comes with several additional components. In this guide we show you how to use them. We are using our previous example code here.
MiniMap
If your flow gets bigger, you might want to get an overview quickly. For this we have built the MiniMap
component. You can easily add it to your flow by adding it as a children:
import { ReactFlow, MiniMap } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { defaultNodes } from './nodes';
import { defaultEdges } from './edges';
const nodeColor = (node) => {
switch (node.type) {
case 'input':
return '#6ede87';
case 'output':
return '#6865A5';
default:
return '#ff0072';
}
};
function Flow() {
return (
<ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView>
<MiniMap nodeColor={nodeColor} nodeStrokeWidth={3} zoomable pannable />
</ReactFlow>
);
}
export default Flow;
Controls
React Flow comes with a customizable controls bar, that you can use by importing the Controls
component
import { ReactFlow, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { defaultNodes } from './nodes';
import { defaultEdges } from './edges';
function Flow() {
return (
<ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView>
<Controls />
</ReactFlow>
);
}
export default Flow;
Background
If you want to display the pattern background, you can use the Background
component
import { useState } from 'react';
import { ReactFlow, Background, Panel } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { defaultNodes } from './nodes';
import { defaultEdges } from './edges';
function Flow() {
const [variant, setVariant] = useState('cross');
return (
<ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView>
<Background color="#ccc" variant={variant} />
<Panel>
<div>variant:</div>
<button onClick={() => setVariant('dots')}>dots</button>
<button onClick={() => setVariant('lines')}>lines</button>
<button onClick={() => setVariant('cross')}>cross</button>
</Panel>
</ReactFlow>
);
}
export default Flow;
Panel
A helper component to display content on top of the React Flow viewport. Panel
component
import { ReactFlow, Background, Panel } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
const nodes = [
{
id: '1',
data: { label: 'this is an example flow for the <Panel /> component' },
position: { x: 0, y: 0 },
},
];
function Flow() {
return (
<ReactFlow nodes={nodes} fitView>
<Panel position="top-left">top-left</Panel>
<Panel position="top-center">top-center</Panel>
<Panel position="top-right">top-right</Panel>
<Panel position="bottom-left">bottom-left</Panel>
<Panel position="bottom-center">bottom-center</Panel>
<Panel position="bottom-right">bottom-right</Panel>
<Background variant="cross" />
</ReactFlow>
);
}
export default Flow;