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