<ReactFlowProvider />
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 | |
initialFitViewOptions | FitViewOptions 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 | [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.