NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #4031 most downloaded on npm
React Flow - A highly customizable React library for building node-based editors and interactive flow charts.
Last release 10 days ago
24 Sep 2026
Ships fairly regularly
a new release about every 3 weeks
Nearly every release is documented
notes for 57 of 57 stable releases
Nothing withdrawn
no release was ever pulled
3 years old
86 releases · first in 2024
Updated dependencies [ 91a4adf , 91a4adf ]:
Updated dependencies [ 0117cc9 ]:
One column per month.
Updated dependencies [ 22e0be2 ]:
22e0be2]:
Patch Changes #5974 8c42922 - Minimap still works after ReactFlow remounts #5962 cbf40b9 - Show log if user hides attribution in development #5976 331
Updated dependencies [ 393d951 , ff126a0 , e5d86bd , 392da00 ]:
#5902 393d951 - Allow middle-mouse viewport panning to start from a selection rectangle.
#5889 ff126a0 - Fix extent: 'parent' not immediately resolving when parent has width or initialWidth.
#5947 2ba040f - Use correct nodeExtent for internal setNodes.
#5918 c5d7442 - Fix selection box appearing when dragging the pane via touch. Prefer touch panning over drag selection when selectionOnDrag is combined with mouse-button-specific panOnDrag settings.
#5922 392da00 - Allow Control to activate pane panning with a primary-button drag.
#5929 4c5d7d2 - Allow key combinations of three or more keys (e.g. 'Meta+Shift+s') for useKeyPress.
#5938 91a052f - Fix <Background /> pattern offset miscalculation.
Updated dependencies [393d951, ff126a0, e5d86bd, 392da00]:
Updated dependencies \[`c707267`, `0c0cebc`, `56cf3b0`, `a01bb6b`, `9b3f390`, `cdfcbeb`]:
#5825 5072914 - Only create an XYDrag instance for draggable nodes.
#5847 742860c - Stop the MiniMap from re-rendering on every store update.
#5846 17c64a1 - Apply the viewport pan/zoom transform imperatively so the Viewport component only renders once.
Updated dependencies [c707267, 0c0cebc, 56cf3b0, a01bb6b, 9b3f390, cdfcbeb]:
Updated dependencies \[`ceb8604`, `87da45c`]:
#5815 87da45c - Fix FinalConnectionState type so it preserves the discriminated union.
#5824 6b1dac5 - Do not fire on pane click when connection ends on pane
#5818 4ddc2d8 - Provide the shared handle config (connectOnClick, noPanClassName, rfId) through context instead of subscribing to the store in every Handle, so a store update no longer runs a selector once per handle
#5817 8df250b - Reduce per-handle work on store updates by returning a shared connection state while no connection is in progress.
#5822 a6249de - Return stable reference for edge position when connected node gets deleted
Updated dependencies [ceb8604, 87da45c]:
Updated dependencies [`732c8eb`, `c5c853d`, `e6661de`, `737194d`, `40660cd`, `4806e7c`, `7055140`]:
e6661de - Add autoPanOnSelection to auto-pan when user drags a selection close to the edge of the viewport.#5791 732c8eb - Adds a type error when handleId is used without handleType in useNodeConnections
#5793 c5c853d - Dev Warnings now use library-specific messaging with the correct documentation links.
#5755 88737f9 - Add @types/react and @types/react-dom as optional peer dependencies to prevent issues with pnpm strict mode (hoist: false)
#5784 7055140 - Fix node resizing possible beyond absolute extents
#5769 ad4d547 - Use useEffect for StoreUpdater to restore previous behaviour
Updated dependencies [732c8eb, c5c853d, e6661de, 737194d, 40660cd, 4806e7c, 7055140]:
Updated dependencies \[`4a278dbbf`]:
#5735 a6c938fb2 Thanks @nvie! - Allow type field to be missing in BuiltInNode (no type field is the same as type: "default")
#5722 8c9b7e726 Thanks @dfblhmm! - Add snapGrid to screenToFlowPosition options
#5723 82249517a Thanks @moklick! - Pass options to useReactFlow/useSvelteFlow viewport helper functions correctly
#5733 64115cd08 Thanks @AlaricBaraou! - Fix empty store during ReactFlow remount by reordering StoreUpdater before GraphView and using layout effects
#5727 dd54e86b9 Thanks @solastley! - Ensure visual nodes selection state is cleared when zero selected nodes remain in the flow
Updated dependencies [4a278dbbf]:
Updated dependencies \[`ce6c869df`]:
#5704 c91d3d022 Thanks @peterkogo! - Keep onConnectEnd and isValidConnection up to date in an ongoing connection
#5687 2624479ad Thanks @vkrol! - Optimize zooming performance when panOnScroll mode is enabled
#5682 7b6e46ce1 Thanks @artemtam! - Prevent unnecessary updates when selectNodesOnDrag = false
#5703 ce6c869df Thanks @peterkogo! - Improve return type of useNodesData. Now you can narrow down the data type by checking the node type.
#5692 49646858f Thanks @moklick! - Handle undefined node in mini map
#5684 382c654c3 Thanks @ysds! - Consolidate drag handler effects in useDrag to fix programmatic selection issues
Updated dependencies [ce6c869df]:
Updated dependencies \[`0c7261a6d`, `8598b6bc2`, `2d7fa40e2`]:
#5637 0c7261a6d Thanks @moklick! - Add zIndexMode to control how z-index is calculated for nodes and edges
#5484 a523919d6 Thanks @peterkogo! - Add experimental_useOnNodesChangeMiddleware hook
#5629 9030fab2d Thanks @AlaricBaraou! - Prevent unnecessary re-render in FlowRenderer
#5592 38dbf41c4 Thanks @svilen-ivanov-kubit! - Always create a new measured object in apply changes.
#5635 2d7fa40e2 Thanks @tornado-softwares! - Update an ongoing connection when user moves node with keyboard.
Updated dependencies [0c7261a6d, 8598b6bc2, 2d7fa40e2]:
Updated dependencies \[`00bcb9f5f`]:
### Patch Changes - #5593 `a8ee089d7` Thanks @moklick! - Reset selection box when user selects a node
Updated dependencies \[`5ec0cac7f`]:
#5572 5ec0cac7f Thanks @peterkogo! - Fix onPaneClick events being suppressed when selectionOnDrag=true
Updated dependencies [5ec0cac7f]:
Updated dependencies \[`c17b49f4c`, `6ffb9f790`, `d50a963cd`, `6bb64b3ed`, `8a9ee2d83`, `1c8961207`]:
#5544 c17b49f4c Thanks @0x0f0f0f! - Add EdgeToolbar component
#5550 6ffb9f790 Thanks @peterkogo! - Prevent child nodes of different parents from overlapping
#5551 6bb64b3ed Thanks @moklick! - Allow to start a selection above a node
#5531 fe2a45ed2 Thanks @Sec-ant! - Add type property to EdgeProps to match NodeProps behavior
#5528 d50a963cd Thanks @peterkogo! - Let NodeResizer props change during ongoing resize
#5530 3b9951e42 Thanks @peterkogo! - Improve performance of adding nodes & edges
#5547 1c8961207 Thanks @moklick! - Always call onMoveEnd when onMoveStart was called
Updated dependencies [c17b49f4c, 6ffb9f790, d50a963cd, 6bb64b3ed, 8a9ee2d83, 1c8961207]:
Updated dependencies [`9b4e99029`, `70b672604`]:
#5515 9b4e99029 Thanks @peterkogo! - Fix id of static handles not being parsed
#5512 70b672604 Thanks @peterkogo! - Prevent native page zoom when pinch zooming on node with nowheel class
Updated dependencies [9b4e99029, 70b672604]:
Updated dependencies \[`f869808e3`, `2a35c65a0`, `b6ae4cc11`, `d891e5ff1`, `eba087e8b`]:
#5480 f869808e3 Thanks @peterkogo! - Prevent multi-touch events while making a new connection
#5482 56381ae54 Thanks @peterkogo! - Make isNodeIntersecting behave the same as getIntersectingNodes
#5509 b6ae4cc11 Thanks @moklick! - Prevent calling onResizeEnd if node was not resized
#5511 d891e5ff1 Thanks @peterkogo! - Fix regression: elevate edges if connected nodes are selected
#5497 eba087e8b Thanks @peterkogo! - Skip eagerly rendering nodes when node dimensions and handles are predefined
#5455 d2df1dced Thanks @Sec-ant! - Fix warning when display is set to none on the wrapper div
Updated dependencies [f869808e3, 2a35c65a0, b6ae4cc11, d891e5ff1, eba087e8b]:
Updated dependencies \[`5ece6b36`, `53da1193`]:
Updated dependencies \[`144f8feb`, `f18e9856`, `7a088817`, `6838df9d`, `fddbb7de`, `f5fe1d71`, `daa33fb3`]:
#5420 c453ee3f Thanks @ShlomoGalle! - Omit defaultValue from Node's domAttributes to fix type incompatibility when using WritableDraft
#5436 def02b96 Thanks @moklick! - Prevent a 0 added to the markup for edges when interactionWidth is 0
#5444 9aca4839 Thanks @paula-stacho! - Export MiniMapNode
#5443 144f8feb Thanks @moklick! - Use 1 as the default for interactive Minimap zoom step
#5428 f18e9856 Thanks @Karl255! - Fix clicking on detached handle elements not initiating drawing of connections
#5453 7a088817 Thanks @moklick! - Snap selection instead of separate nodes when snap grid is enabled
#5415 6838df9d Thanks @moklick! - Allow strings and enums for existing marker types
#5444 9192fd7d Thanks @paula-stacho! - Export MiniMapNode
#5448 f5fe1d71 Thanks @moklick! - Use correct HandleConnection type for Handle onConnect
#5419 daa33fb3 Thanks @0x0f0f0f! - Make arrow heads markers fallback to --xy-edge-stroke CSS variable when passing null as marker color
Updated dependencies [144f8feb, f18e9856, 7a088817, 6838df9d, fddbb7de, f5fe1d71, daa33fb3]:
Updated dependencies \[`864d4188`, `f0ce2c87`]:
#5384 18514e11 Thanks @Sec-ant! - Fix node fallback to respect custom default node type when unknown node type is encountered
#5394 21db22d4 Thanks @moklick! - Return intersections correctly of passed node is bigger than intersecting nodes
#5384 ab05d008 Thanks @Sec-ant! - Fix edge fallback to respect custom default edge type when unknown edge type is encountered.
#5376 f0ce2c87 Thanks @kennyjwilli! - Add stepPosition param to step edge
Updated dependencies [864d4188, f0ce2c87]:
Updated dependencies \[`26f2cdd7`]:
26f2cdd7]:
Updated dependencies \[`72dc1d60`, `90e9247a`, `2441bf8d`]:
Updated dependencies \[`c4312d89`, `3d7e8b6b`, `9c61000c`]:
#5333 3d7e8b6b Thanks @peterkogo! - Add missing type exports
#5353 4dd3ae66 Thanks @aidanbarrett! - Add missing FinalConnectionState parameter to onReconnectEnd prop types
Updated dependencies [c4312d89, 3d7e8b6b, 9c61000c]:
Updated dependencies \[`848b486b`, `dba6faf2`, `6ce44a05`, `f59730ce`, `09458f52`, `050b511c`]:
#5299 848b486b Thanks @printerscanner! - Add ariaRole prop to nodes and edges
#5276 6ce44a05 Thanks @moklick! - Add an ease and interpolate option to all function that alter the viewport
#5277 f59730ce Thanks @printerscanner! - Add ariaLabelConfig prop for customizing UI text like aria labels and descriptions.
#5317 09458f52 Thanks @moklick! - Add domAttributes option for nodes and edges
#5326 050b511c Thanks @peterkogo! - Prevent NodeResizer controls to become too small when zooming out
#5308 09fab679 Thanks @printerscanner! - Focus nodes on tab if not within the viewport and add a new prop autoPanOnNodeFocus
Updated dependencies \[`77107453`]:
Updated dependencies \[`77bf79c4`]:
#5259 77bf79c4 Thanks @peterkogo! - Fix background-color css variable fallback.
Updated dependencies [77bf79c4]:
Updated dependencies \[`a95f0e2f`]:
Updated dependencies \[`2a03213b`]:
Updated dependencies \[`a7d10ffc`, `4e681f9c`]:
Updated dependencies \[`0f43b8ea`, `fc241253`, `98fe23c7`, `e5735b51`]:
#5212 0f43b8ea Thanks @moklick! - Add polyfill for Promise.withResolvers
#5192 fc241253 Thanks @peterkogo! - Optimize performance of nodesInitialized
#5196 7f902db4 Thanks @moklick! - Hide edge marker and attribution for screenreaders
#5213 78782c16 Thanks @moklick! - Do not trigger selection events if elementsSelectable=false
#5191 e5735b51 Thanks @peterkogo! - Fix legacy padding being slightly larger than before
Updated dependencies [0f43b8ea, fc241253, 98fe23c7, e5735b51]:
Updated dependencies \[`02a3b746`, `cbe305e1`, `1f671bd4`, `aaebc462`, `6ec942fc`]:
#5172 e6139a00 Thanks @dimaMachina! - Improve TSDoc comments for useNodesData, useReactFlow, isNode and isEdge
#5165 d536abea Thanks @dimaMachina! - Improve TSDoc comments for useViewport, useUpdateNodeInternals, useOnSelectionChange, useNodesInitialized hooks and UseOnSelectionChangeOptions, UseNodesInitializedOptions types
#5171 62d87409 Thanks @dimaMachina! - Improve TSDoc comments for ReactFlowProps
#5154 d0237166 Thanks @ibagov! - Improve TSDoc comments for onNodesChange
#5174 ae585d13 Thanks @dimaMachina! - Improve TSDoc comments for BaseEdgeProps
#5159 0c1436d6 Thanks @dimaMachina! - Improve TSDoc comments for useConnection hook
#5167 934ea42d Thanks @dimaMachina! - Improve TSDoc comments for useEdges, useInternalNode, useNodes and useNodeId hooks
#5163 ab800054 Thanks @dimaMachina! - Improve TSDoc comments for useNodesState and useEdgesState hook
#5160 b357f43d Thanks @dimaMachina! - Improve TSDoc comments for type UseHandleConnectionsParams and useHandleConnections hook
#5162 29f4aeb2 Thanks @dimaMachina! - Improve TSDoc comments for type UseNodeConnectionsParams and useNodeConnections hook
#5164 09021550 Thanks @dimaMachina! - Improve TSDoc comments for type UseOnViewportChangeOptions and useOnViewportChange hook
#5166 701ad17e Thanks @dimaMachina! - Improve TSDoc comments for useStore hook
#5170 eb2a33c6 Thanks @dimaMachina! - Improve TSDoc comments for interface GetSimpleBezierPathParams and getSimpleBezierPath
#5161 c4efe749 Thanks @dimaMachina! - Improve TSDoc comments for type UseKeyPressOptions and useKeyPress hook
Updated dependencies [02a3b746, cbe305e1, 1f671bd4, aaebc462, 6ec942fc]:
Updated dependencies \[`f819005b`, `24a1bc89`, `36657cd6`, `89de9ca8`, `2ac6e155`, `f0f378e5`]:
#5134 7acab1e1 Thanks @dimaMachina! - Adjust @default TSDoc tags for BackgroundProps
#5135 754a1671 Thanks @dimaMachina! - Improve TSDoc comments for NodeResizerProps and ResizeControlProps
#5140 82e6860e Thanks @dimaMachina! - Improve TSDoc comments for MiniMapProps and PanelProps
#5147 f819005b Thanks @moklick! - Pass dimensions to final resize change event
#5143 b1e1cc11 Thanks @dimaMachina! - Improve TSDoc comments for ReactFlowInstance and GeneralHelpers
#5138 d4eb8d52 Thanks @dimaMachina! - Improve TSDoc comments for ViewportHelperFunctions and NodeToolbarProps
#5144 5a1ce56e Thanks @dimaMachina! - Compare nodeStrokeWidth with number, not with string within MiniMap
#5141 06cf4c10 Thanks @dimaMachina! - Improve TSDoc comments for Edge, BaseEdgeProps and ConnectionLineComponentProps
Updated dependencies [f819005b, 24a1bc89, 36657cd6, 89de9ca8, 2ac6e155, f0f378e5]:
### Patch Changes - #5132 `75ab8942` Thanks @peterkogo! - Fix fitView not working when onNodesChange is not defined.
75ab8942 Thanks @peterkogo! - Fix fitView not working when onNodesChange is not defined.### Patch Changes - #5124 `b76f7f9e` Thanks @bjornosal! - Export NodeConnection type - #5127 `3079c2c9` Thanks @peterkogo! - Fix fitView not working w
#5124 b76f7f9e Thanks @bjornosal! - Export NodeConnection type
#5127 3079c2c9 Thanks @peterkogo! - Fix fitView not working when returning early in onNodesChange.
### Patch Changes - #5120 `6dfea686` Thanks @moklick! - Handle fitView for uncontrolled flows
Updated dependencies \[`5d15b01b`, `cb685281`, `a79f30b3`]:
acba901d Thanks @peterkogo! - You can now express paddings in fitViewOptions as pixels ('30px'), as viewport percentages ('20%') and define different paddings for each side.#5109 0cdda42c Thanks @dimaMachina! - fix: improve TSDoc comments for BackgroundProps
#5059 065ff89d Thanks @bcakmakoglu! - Prevent onPaneClick when connection is in progress. Closes #5057
#5110 7eb6eb07 Thanks @dimaMachina! - fix: improve TSDoc comments for EdgeLabelOptions and BaseEdgeProps
#5113 bce8542d Thanks @dimaMachina! - fix: improve TSDoc comments for ControlProps
#5116 58942154 Thanks @dimaMachina! - fix: improve TSDoc comments for NodeToolbarProps
#5114 ba2bfbb4 Thanks @dimaMachina! - feat: export EdgeLabelRendererProps
#5107 c5a8c237 Thanks @moklick! - Add TSDoc annotations for exported edges
#5067 cb685281 Thanks @peterkogo! - Fix fitView not working immediately after adding new nodes
#5115 c2154557 Thanks @dimaMachina! - fix: improve TSDoc comments for EdgeLabelOptions and EdgeTextProps
#5093 65825e89 Thanks @moklick! - Hidden nodes are not displayed in the mini map anymore
#5090 8da1748a Thanks @moklick! - Release key even when an inout field is focused
Updated dependencies [5d15b01b, cb685281, a79f30b3]:
Updated dependencies \[`99dd7d35`]:
#5052 99dd7d35 Thanks @moklick! - Show an error if user drags uninitialized node
#5042 2fe0e850 Thanks @moklick! - Allow click connections when target sets isConnectableStart
#5047 b3bf5693 Thanks @moklick! - Pass generics to OnSelectionChangeFunc so that users can type it correctly
#5053 25fb45b5 Thanks @moklick! - Remove incorrect deprecation warning
#5033 7b4a81fb Thanks @dimaMachina! - lint: use React.JSX type instead of the deprecated global JSX namespace
#5043 0292ad20 Thanks @moklick! - Use current expandParent value on drag to be able to update it while dragging
#5032 5867bba8 Thanks @dimaMachina! - lint: remove unnecessary type assertions
Updated dependencies [99dd7d35]:
Updated dependencies \[`6c121d42`, `4947029c`, `e8e0d684`]:
#5010 6c121d42 Thanks @moklick! - Add more TSDocs to components, hooks, utils funcs and types
#4991 ea54d9bc Thanks @waynetee! - Fix viewport shifting on node focus
#5013 cde899c5 Thanks @moklick! - Pass NodeType type argument from ReactFlowProps to connectionLineComponent property.
#5008 12d859fe Thanks @moklick! - Add package.json to exports
#5012 4d3f19e8 Thanks @moklick! - Add snapGrid option to screenToFlowPosition and set snapToGrid to false
#5003 e8e0d684 Thanks @dimaMachina! - repair lint command
#4991 4c62f19b Thanks @waynetee! - Prevent viewport shift after using Tab
Updated dependencies [6c121d42, 4947029c, e8e0d684]:
Updated dependencies \[`fe843982`, `e73ef09f`]:
#4957 fe843982 Thanks @peterkogo! - Narrow properties selected, selectable, deletable, draggable of NodeProps type to be required.
Updated dependencies [fe843982, e73ef09f]:
Updated dependencies \[`592c7eaf`]:
#4949 592c7eaf Thanks @peterkogo! - Fix useNodeConnection hook not returning all connected edges.
Updated dependencies [592c7eaf]:
Updated dependencies \[`e2d849dc`, `e10f53cf`, `4947f683`]:
e10f53cf Thanks @peterkogo! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.#4947 868aa3f3 Thanks @moklick! - Export ResizeControlVariant correctly as a value.
#4880 e2d849dc Thanks @crimx! - Add type check for all event targets
#4929 4947f683 Thanks @peterkogo! - Optimize selections and take into account if edges connected to selected nodes are actually selectable.
Updated dependencies [e2d849dc, e10f53cf, 4947f683]:
Updated dependencies \[`d60331e6`]:
#4846 75017939 Thanks @moklick! - Make it possible to use expandParent with immer and other immutable helpers
#4865 2c4acc2b Thanks @moklick! - Add group node to BuiltInNode type. Thanks @sjdemartini!
#4877 9a8309da Thanks @peterkogo! - Fix intersections for nodes with origins other than [0,0]. Thanks @gmvrpw!
#4844 6f11e552 Thanks @moklick! - Allow custom data-testid for ReactFlow component
#4816 43aa52a8 Thanks @moklick! - Type isValidConnection prop correctly by passing EdgeType
#4855 106c2cf8 Thanks @mhuggins! - Support passing path element attributes to BaseEdge component.
#4862 adf4fb4e Thanks @bcakmakoglu! - Prevent default scrolling behavior when nodes or a selection is moved with an arrow key press.
#4875 41d4743a Thanks @peterkogo! - Prevent unnecessary rerenders of edges when resizing the flow.
#4826 5f90acda Thanks @chrtze! - Forward ref of the div inside Panel components.
Updated dependencies [d60331e6]:
Updated dependencies \[`2fa9a920`, `323e1b35`]:
#4789 358eb355 Thanks @peterkogo! - Support key combinations which include '+' (e.g., 'Control++' resolves to the combination 'Control' and '+').
#4796 73402779 Thanks @Aki-7! - Fix number of issues connected to batching node & edge updates.
#4790 2fa9a920 Thanks @peterkogo! - Fix node dragging & resizing while zooming on flow that does not cover whole browser window.
#4782 323e1b35 Thanks @peterkogo! - Fix node intersections in nested flow.
Updated dependencies [2fa9a920, 323e1b35]:
Updated dependencies \[`7f670ab0`]:
Updated dependencies \[`005ae1c0`, `2c590b90`]:
#4755 005ae1c0 Thanks @peterkogo! - Add module to exports in package.json. This should resolve possible issues with Webpack ESM Module Resolution.
#4730 2c590b90 Thanks @peterkogo! - Fixed rare crash while dragging
Updated dependencies [005ae1c0, 2c590b90]:
### Patch Changes - #4722 `e816bb69` Thanks @moklick! - Fix internal behaviour that mutated user nodes which led to an issue with Redux and immer
Updated dependencies \[`99ba64ac`, `b056564c`]:
#4670 b056564c Thanks @peterkogo! - Fix initial fitView not working correctly for nodeOrigin other than [0,0]
#4670 b056564c Thanks @peterkogo! - Improve fitView to respect clamped node positions based on nodeExtent
#4653 02390f99 Thanks @bcakmakoglu! - Calculate viewport dimensions in fitView instead of using stored dimensions. Fixes #4652
Updated dependencies [99ba64ac, b056564c]:
Updated dependencies \[`d5592e75`, `d9563505`]:
d5592e75 Thanks @peterkogo! - Add getNodesBounds to useReactFlow/useSvelteFlow hook as the new recommended way of determining node bounds.#4630 4347269f Thanks @moklick! - Fix <Minimap /> only displaying nodes when providing onNodesChange.
#4572 d9563505 Thanks @peterkogo! - Improve handling of global and individual nodeExtents. Nodes will never render outside of specified extents.
Updated dependencies [d5592e75, d9563505]:
Updated dependencies \[`5138d90b`, `12dbe125`]:
b65aed19 Thanks @bcakmakoglu! - Add getHandleConnections helper to useReactFlow & useSvelteFlowUpdated dependencies \[`c3e62782`]:
#4568 c3e62782 Thanks @peterkogo! - Only display grab cursor when panOnDrag is on left mouse button
#4567 cc75c29f Thanks @peterkogo! - Fix internal type of edges in store
Updated dependencies [c3e62782]:
Updated dependencies \[`b63a3734`, `24e87e39`, `692e6440`, `559d4926`, `4ecfd7e1`, `e7ef328f`, `99733c01`]:
#4555 24e87e39 Thanks @peterkogo! - Added final connection state as a function parameter to onReconnectEnd
#4554 cca11ea1 Thanks @peterkogo! - Added optional selector for useConnection hook
#4549 99733c01 Thanks @moklick! - feat(onConnectEnd): pass connectionState param
#4550 41981970 Thanks @moklick! - fix(fitView): only trigger for resize observer
#4501 ec64b572 Thanks @jeffgord! - fix(background): use offset prop correctly for dots variant
#4548 692e6440 Thanks @peterkogo! - Replaced algorithm used for searching close handles while connecting
#4547 fdff601d Thanks @moklick! - chore(react): re-export Handle type
Updated dependencies [b63a3734, 24e87e39, 692e6440, 559d4926, 4ecfd7e1, e7ef328f, 99733c01]:
### Patch Changes - #4480 `aae526f4` Thanks @peterkogo! - fix(dragging) nodeExtent breaks dragging nodes in subflows - #4498 `7a6e9e30` Thanks @peterk
#4480 aae526f4 Thanks @peterkogo! - fix(dragging) nodeExtent breaks dragging nodes in subflows
#4498 7a6e9e30 Thanks @peterkogo! - fix(pane) only capture pointer after a valid selection has started, fixes #4492
Updated dependencies \[`543c0939`, `89cd677b`, `c253c7c5`]:
Updated dependencies \[`80baf53b`, `4cccd06a`]:
Updated dependencies \[`d2da5765`]:
React Flow 12 is finally out! With a new package name @xyflow/react!
React Flow 12 is finally out! With a new package name @xyflow/react!
width, height and handles for the nodes. This makes it possible to render a flow on the server and hydrate on the client: SSR guide
width and height were set by the library as soon as the nodes got measured. This still happens, but we are now using measured.width and measured.height to store this information. In the previous versions there was always a lot of confusion about width and height. It’s hard to understand, that you can’t use it for passing an actual width or height. It’s also not obvious that those attributes get added by the library. We think that the new implementation solves both of the problems: width and height are optional attributes that can be used to define dimensions and the measured dimensions are stored in measured.useHandleConnections and useNodesData and the new updateNode and updateNodeData functions can be used for managing the data flow between your nodes: computing flows guide
colorMode prop (”light”, “dark” or “system”): dark mode example
There is more! Besides the new main features, we added some minor things that were on our list for a long time. We also started to use TS docs for better docs. We already started to add some docs for some types and hooks which should improve the developer experience.
useConnection hook: With this hook you can access the ongoing connection. For example, you can use it for colorizing handles styling a custom connection line based on the current start / end handles.viewport: This is an advanced feature. Possible use cases are to animate the viewport or round the transform for lower res screens for example. This features brings two new props: viewport and onViewportChange.ViewportPortal component: This makes it possible to render elements in the viewport without the need to implement a custom node.onDelete handler: We added a combined handler for onDeleteNodes and onDeleteEdges to make it easier to react to deletions.onBeforeDelete handler: With this handler you can prevent/ manage deletions.isValidConnection prop: This makes it possible to implement one validation function for all connections. It also gets called for programmatically added edges.autoPanSpeed prop: For controlling the speed while auto panning.patternClassName prop to be able to style the background pattern by using a class name. This is useful if you want to style the background pattern with Tailwind for example.onMove callback gets triggered for library-invoked viewport updates (like fitView or zoom-in)deleteElements now returns deleted nodes and deleted edgesorigin attribute for nodesselectable attribute for edgesBezierEdge, StepEdge, SmoothStepEdge and StraightEdge componentssourceHandle and targetHandle attributes when those attributes are set. (We used to pass sourceHandle: null and targetHandle: null)nodeDragThreshold is 1 by default instead of 0selectable, deletable, draggable and parentId to NodePropsadd paneDistanceClick prop (max distance between mousedown/up that will trigger a click)
paneDistanceClick prop (max distance between mousedown/up that will trigger a click)onNodeDragStop are set to dragging=falsereturn Promises for setViewport, fitView, fitBounds and zoomTo to be able to await viewport update
setViewport, fitView, fitBounds and zoomTo to be able to await viewport update- add autoPanSpeed prop
autoPanSpeed propYour coding agent can read these notes before it upgrades. Set up the MCP server →