<ReactFlow />

Source on GitHub 

The <ReactFlow /> component is the heart of your React Flow application. It renders your nodes and edges, handles user interaction, and can manage its own state if used as an uncontrolled flow.

import { ReactFlow } from '@xyflow/react'
 
export default function Flow() {
  return <ReactFlow
    nodes={...}
    edges={...}
    onNodesChange={...}
    ...
  />
}

This component takes a lot of different props, most of which are optional. We’ve tried to document them in groups that make sense to help you find your way.

Common props

These are the props you will most commonly use when working with React Flow. If you are working with a controlled flow with custom nodes, you will likely use almost all of these!

Viewport props

Edge props

Event handlers

General Events

Node Events

Edge Events

Connection Events

Pane Events

Selection Events

Interaction props

Connection line props

Keyboard props

React Flow let’s you pass in a few different keyboard shortcuts as another way to interact with your flow. We’ve tried to set up sensible defaults like using backspace to delete any selected nodes or edges, but you can use these props to set your own.

To disable any of these shortcuts, pass in null to the prop you want to disable.

Style props

Applying certain classes to elements rendered inside the canvas will change how interactions are handled. These props let you configure those class names if you need to.

Notes

• The props of this component get exported as ReactFlowProps