Skip to main content

<ReactFlowProvider />

You need to wrap your flow with a ReactFlowProvider if you:

  • want to use one of these React Flow hooks useReactFlow, useNodes, useEdges, useViewport, useUpdateNodeInternals or useNodesInitialized in components that are not children of the ReactFlow component
  • have multiple flows on a page
  • need to access the internal state and actions in components that are not children of the ReactFlow component
import ReactFlow, { ReactFlowProvider, useReactFlow } from 'reactflow';

const nodes = [{ id: 'node-1', position: { x: 0, y: 0 }, data: { label: 'node 1' } }];

function Flow() {
const reactFlowInstance = useReactFlow();

return <ReactFlow defaultNodes={nodes} />;
}

function FlowWithProvider() {
return (
<ReactFlowProvider>
<Flow />
</ReactFlowProvider>
);
}

This component gets used in the ReactFlowProvider example.