Skip to main content

<Background />

React Flow comes with two background variants: dots and lines. You can use it by passing it as a children to the ReactFlow component:

Usage

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

function FlowWithBackground() {
return (
<ReactFlow nodes={[]} edges={[]}>
<Background variant="dots" gap={12} size={4} />
</ReactFlow>
);
}

Prop Types

NameTypeDefaultDescription
variant'lines', 'dots''dots'Background pattern type
gapnumber16Gap between the patterns
sizenumber0.5Radius of the dots or the stroke width of the lines
colorstring#81818aPattern color
styleCSSPropertiesundefinedBackground style attributes
classNamestringundefinedAdditional class name

Typescript: The interface of the Background Prop Types are exported as BackgroundProps.