We just launched Svelte Flow!

React Flow

LearnLearnReferenceReferenceExamplesExamples
React Flow Pro
  • API Reference
  • <ReactFlow />
  • <ReactFlowProvider />
  • Components
    • <Background />
    • <BaseEdge />
    • <ControlButton />
    • <Controls />
    • <EdgeLabelRenderer />
    • <EdgeText />
    • <Handle />
    • <MiniMap />
    • <NodeResizer />
    • <NodeResizeControl />
    • <NodeToolbar />
    • <Panel />
  • Hooks
    • useEdges()
    • useEdgesState()
    • useKeyPress()
    • useNodeId()
    • useNodes()
    • useNodesInitialized()
    • useNodesState()
    • useOnSelectionChange()
    • useOnViewportChange()
    • useReactFlow()
    • useStore()
    • useStoreApi()
    • useUpdateNodeInternals()
    • useViewport()
  • Types
    • BackgroundVariant
    • Connection
    • ConnectionLineComponentProps
    • ConnectionLineType
    • CoordinateExtent
    • DefaultEdgeOptions
    • Edge
    • EdgeChange
    • EdgeMarker
    • EdgeProps
    • FitViewOptions
    • MarkerType
    • MiniMapNodeProps
    • Node
    • NodeChange
    • NodeProps
    • PanelPosition
    • Position
    • ProOptions
    • ReactFlowInstance
    • ReactFlowJsonObject
    • ResizeParams
    • Viewport
  • Utils
    • addEdge()
    • applyEdgeChanges()
    • applyNodeChanges()
    • getBezierPath()
    • getConnectedEdges()
    • getIncomers()
    • getMarkerEnd()
    • getNodesBounds()
    • getOutgoers()
    • getRectOfNodes()
    • getSimpleBezierPath()
    • getSmoothStepPath()
    • getStraightPath()
    • getTransformForBounds()
    • getViewportForBounds()
    • isEdge()
    • isNode()
    • updateEdge()
Question? Give us feedback → (opens in a new tab)Edit this pageWhat's new here?
Reference
Types
BackgroundVariant

BackgroundVariant

Source on GitHub (opens in a new tab)

The three variants are exported as an enum for convenience. You can either import the enum and use it like BackgroundVariant.Lines or you can use the raw string value directly.

export enum BackgroundVariant {
  Lines = 'lines',
  Dots = 'dots',
  Cross = 'cross',
}
TypesConnection

A project by the xyflow team

We are building and maintaining open source software for node-based UIs since 2019.

React Flow

Quickstart GuideAPI ReferenceExamplesShowcaseReact Flow Pro

Community

DiscordGithubMastodonBluesky

xyflow

BlogOpen SourceAboutContact

Legal

MIT LicenseCode of ConductImprint

info@xyflow.com — Copyright © 2023 webkid GmbH. All rights reserved — website design by Facu Montanaro