<Background />

Source on GitHub (opens in a new tab)

The <Background /> component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.

import { useState } from 'react';
import ReactFlow, { Background, BackgroundVariant } from 'reactflow';
 
export default function Flow() {
  return (
    <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
      <Background color="#ccc" variant={BackgroundVariant.Dots} />
    </ReactFlow>
  );
}

Props

Name	Type	Default
#`id?`	`string`
#`color?`	`string`
#`className?`	`string`
#`gap?`	`number \| [number, number]` The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.	`28`
#`size?`	`number` The radius of each dot or the size of each rectangle if BackgroundVariant.Dots or BackgroundVariant.Cross is used. This defaults to 1 or 6 respectively, or ignored if BackgroundVariant.Lines is used.
#`offset?`	`number`	`2`
#`lineWidth?`	`number`	`1`
#`variant?`	`BackgroundVariant`	`BackgroundVariant.Dots`
#`style?`	`React.CSSProperties`

Examples

Combining multiple backgrounds

It is possible to layer multiple <Background /> components on top of one another to create something more interesting. The following example shows how to render a square grid accented every 10th line.

import ReactFlow, { Background, BackgroundVariant } from 'reactflow';
 
import 'reactflow/dist/style.css';
 
export default function Flow() {
  return (
    <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
      <Background
        id="1"
        gap={10}
        color="#f1f1f1"
        variant={BackgroundVariant.Lines}
      />
 
      <Background
        id="2"
        gap={100}
        color="#ccc"
        variant={BackgroundVariant.Lines}
      />
    </ReactFlow>
  );
}

Notes

When combining multiple <Background /> components it's important to give each of them a unique id prop!

Components <BaseEdge />