Skip to main content

<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.