Skip to Content
Reference<ReactFlowProvider />

<ReactFlowProvider />

Source on GitHub

The <ReactFlowProvider /> component is a context provider that makes it possible to access a flow’s internal state outside of the <ReactFlow /> component. Many of the hooks we provide rely on this component to work.

import { ReactFlow, ReactFlowProvider, useNodes } from '@xyflow/react' export default function Flow() { return ( <ReactFlowProvider> <ReactFlow nodes={...} edges={...} /> <Sidebar /> </ReactFlowProvider> ) } function Sidebar() { // This hook will only work if the component it's used in is a child of a // <ReactFlowProvider />. const nodes = useNodes() return ( <aside> {nodes.map((node) => ( <div key={node.id}> Node {node.id} - x: {node.position.x.toFixed(2)}, y: {node.position.y.toFixed(2)} </div> ))} </aside> ) }

Props

NameTypeDefault
initialNodesNode[]

These nodes are used to initialize the flow. They are not dynamic.

initialEdgesEdge[]

These edges are used to initialize the flow. They are not dynamic.

defaultNodesNode[]

These nodes are used to initialize the flow. They are not dynamic.

defaultEdgesEdge[]

These edges are used to initialize the flow. They are not dynamic.

initialWidthnumber

The initial width is necessary to be able to use fitView on the server

initialHeightnumber

The initial height is necessary to be able to use fitView on the server

fitViewboolean

When true, the flow will be zoomed and panned to fit all the nodes initially provided.

initialFitViewOptionsFitViewOptions

You can provide an object of options to customize the initial fitView behavior.

initialMinZoomnumber

Initial minimum zoom level

initialMaxZoomnumber

Initial maximum zoom level

nodeOriginNodeOrigin

The origin of the node to use when placing it in the flow or looking up its x and y position. An origin of [0, 0] means that a node’s top left corner will be placed at the x and y position.

[0, 0]
nodeExtentCoordinateExtent

By default, nodes can be placed on an infinite flow. You can use this prop to set a boundary.

The first pair of coordinates is the top left boundary and the second pair is the bottom right.

childrenReactNode

Notes

  • If you’re using a router and want your flow’s state to persist across routes, it’s vital that you place the <ReactFlowProvider /> component outside of your router.
  • If you have multiple flows on the same page you will need to use a separate <ReactFlowProvider /> for each flow.
Last updated on