<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

Name	Type	Default
`initialNodes`	`Node[]` These nodes are used to initialize the flow. They are not dynamic.
`initialEdges`	`Edge[]` These edges are used to initialize the flow. They are not dynamic.
`defaultNodes`	`Node[]` These nodes are used to initialize the flow. They are not dynamic.
`defaultEdges`	`Edge[]` These edges are used to initialize the flow. They are not dynamic.
`initialWidth`	`number` The initial width is necessary to be able to use fitView on the server
`initialHeight`	`number` The initial height is necessary to be able to use fitView on the server
`fitView`	`boolean` When `true`, the flow will be zoomed and panned to fit all the nodes initially provided.
`initialFitViewOptions`	`FitViewOptionsBase<NodeType>` You can provide an object of options to customize the initial fitView behavior.
`initialMinZoom`	`number` Initial minimum zoom level
`initialMaxZoom`	`number` Initial maximum zoom level
`nodeOrigin`	`NodeOrigin` 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]`
`nodeExtent`	`CoordinateExtent` 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.
`children`	`ReactNode`

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.