<Background />
The Background component comes with three background variants: dots, lines and cross. You can use it by passing it as a child to the ReactFlow
component.
Usage Example
Background Combinations
It's possible to add multiple Background
components. Be aware that you need to add a unique id to each Background if you want to do this:
Prop Types
id?
Description:
Needed if you want to display multiple backgrounds
Type:
string
variant?
Description:
Background pattern type
Type:
'lines' | 'dots' | 'cross'
Default:
'dots'
gap?
Description:
Gap between the patterns. You can pass an array with two numbers to specify an x- and a y-gap.
Type:
number | [number, number]
Default:
25
size?
Description:
Radius of the 'dots' or dimension of a 'cross'
Type:
number
Default:
1 if variant == 'dots' | 6 if variant == 'cross'
lineWidth?
Description:
Line width for 'lines' or 'cross'
Type:
number
Default:
1
offset?
Description:
Pattern offset
Type:
number
Default:
2
color?
Description:
Pattern color
Type:
string
Default:
#81818a
style?
Description:
Background style attributes
Type:
CSSProperties
className?
Description:
Additional class name
Type:
string
Typescript
The type of the Background Prop Types are exported as BackgroundProps
.
Npm Package
The background component is published under @reactflow/background
and can also be installed and used separately.