Hooks and Providers

React Flow provides several hooks and a context provider for you to enhance the functionality of your flow. These tools help you to manage state, access internal methods, and create custom components more effectively.

ReactFlowProvider

The ReactFlowProvider is a context provider that allows you to access the internal state of the flow, such as nodes, edges, and viewport, from anywhere in your component tree even outside the ReactFlow component. It is typically used at the top level of your application.

There are several cases where you might need to use the ReactFlowProvider component:

• Many of the hooks we provide rely on this component to work.
• You want to access the internal state of the flow outside of the ReactFlow component.
• You are working with multiple flows on a page.
• You are using a client-side router.

useReactFlow

The useReactFlow hook provides access to the ReactFlowInstance and its methods. It allows you to manipulate nodes, edges, and the viewport programmatically.

This example illustrates how to use the useReactFlow hook.