🔥 React Flow 12 is here! SSR, dark mode, computing flows, and more

React Flow

LearnLearnExamplesExamplesReferenceReference
GitHub (opens in a new tab)React Flow Pro
  • Examples
  • Feature Overview
    • Custom Nodes
    • Updating Nodes
    • Stress Test
    • Hidden
    • Drag Handle
    • Easy Connect
    • Add Node On Edge Drop
    • Proximity Connect
    • Node Resizer
    • Node Toolbar
    • Resize and Rotate
    • Dynamic Grouping
    • Intersections
    • Shapes
    • Connection Limit
    • Delete Middle Node
    • Custom Edges
    • Animating Edges
    • Edge Types
    • Editable Edge
    • Reconnect Edge
    • Connection Line
    • Multi Connection Line
    • Edge Markers
    • Delete Edge on Drop
    • Floating Edges
    • Simple Floating Edges
    • Edge Label Renderer
    • Temporary Edges
    • Sub Flow
    • Horizontal Flow
    • Dagre Tree
    • Entitree Flex Tree
    • Elkjs Tree
    • Elkjs Multiple Handles
    • Auto Layout
    • Force Layout
    • Expand and Collapse
    • Workflow Builder
    • Interaction Props
    • Drag and Drop
    • Computing Flows
    • Validation
    • Connection Events
    • Preventing Cycles
    • Undo and Redo
    • Copy and Paste
    • Helper Lines
    • Touch Device
    • Save and Restore
    • Collision Detection
    • Zoom Transitions
    • Collaborative
    • Contextual Zoom
    • Context Menu
    • Styled Components
    • Tailwind
    • Turbo Flow
    • Base Style
    • Dark Mode
    • Static Server Side Generation
    • Download Image
    • ReactFlowProvider
    • useReactFlow
Examples
Misc
ReactFlowProvider

ReactFlowProvider

If you are working with multiple flows on a page or if you are using a client side router you need to wrap each flow with a ReactFlowProvider so that every flow has its own store instance. Using a ReactFlowProvider is also mandatory if you want to access the internal state outside of the ReactFlow component.

Download ImageuseReactFlow

A project by the xyflow team

We are building and maintaining open source software for node-based UIs since 2019.

React Flow

Quickstart GuideAPI ReferenceExamplesShowcaseCase StudiesReact Flow Pro

Community

DiscordGithubMastodonBluesky

xyflow

BlogOpen SourceAboutContact

Legal

MIT LicenseCode of ConductImprint

info@xyflow.com — Copyright © 2024 webkid GmbH. All rights reserved — website design by Facu Montanaro