<Background />
The Background component comes with three background variants: dots, lines and cross. You can use it by passing it as a children 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' or '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 or [number, number]
Default:
25
size
Description:
Radius of the 'dots' or dimension of a 'cross'
Type:
number
Default:
1 for 'dots', 6 for '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
Default:
undefined
className
Description:
Additional class name
Type:
string
Default:
undefined
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.