<ReactFlowProvider />

<ReactFlowProvider />

Source on GitHub (opens in a new tab)

The <ReactFlowProvider /> component is a context provider (opens in a new tab) 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 'reactflow'
export default function Flow() {
  return (
      <ReactFlow nodes={...} edges={...} />
      <Sidebar />
function Sidebar() {
  // This hook will only work if the component it's used in is a child of a
  // <ReactFlowProvider />.
  const nodes = useNodes()
  return (
      { => (
        <div key={}>
          Node {} -
            x: {node.position.x.toFixed(2)},
            y: {node.position.y.toFixed(2)}


  • 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.