Background

React Flow comes with two background variants: dots and lines. You can use it by passing it as a children to the ReactFlow component:

Usage

import ReactFlow, { Background } from 'react-flow-renderer';

const FlowWithBackground = () => (
  <ReactFlow elements={elements}>
    <Background
      variant="dots"
      gap={12}
      size={4}
    />
  </ReactFlow>
);

Prop Types

variant: string - has to be 'dots' or 'lines' - default: dots
gap: number - the gap between the dots or lines - default: 16
size: number - the radius of the dots or the stroke width of the lines - default: 0.5
color: string - the color of the dots or lines - default: #81818a for dots, #eee for lines
style: css properties
className: additional class name

Typescript: The interface of the Background Prop Types are exported as BackgroundProps.

Edit this page

current version: 9.6.9