Hello again! I am super excited to share the latest improvements of React Flow. The new auto pan features and connection radius makes it way easier to connect nodes and work with bigger flows. On top of that we improved the usability on touch devices.

Auto pan

After working a bit with Blender geometry nodes I knew that I wanted to add this feature. Whenever you drag a node, a selection box or a connection line to the border of the pane, it automatically pans into that direction. This enables the users to connect nodes without having to scroll around and organize nodes more easily. If you don't like it, you can disable this new feature with autoPanOnConnect={false} (opens in a new tab) and autoPanOnNodeDrag={false} (opens in a new tab).

Connection radius

There are several (opens in a new tab) ways (opens in a new tab) to connect nodes. The built-in way is to drag a connection line from one handle to another. To make this easier we added the connectionRadius prop (opens in a new tab). The connection radius specifies the radius around a handle where you can drop the connection line. There is no need to drop it directly above a handle any more 🙌.

Error handling

We added a new onError (opens in a new tab) handler that you can use to get notified when an error happens. This can be useful if you want to log errors or show a notification to the user.

Touch support

Since v10 we support connections on touch devices via tap connect. From now on you can also drag a connection line on touch devices as you would do it with a mouse. Of course the auto pan and connection radius features work on touch devices, too!

Node types (TS only)

We extended the generic Node type so that you can now specify the type by passing a second param to Node.

type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>;

This allows you to create more specific node types that are aware of their data structure and type.

👉 Node Resizer 2.0 👈

We also released a new major version of the @reactflow/node-resizer package (opens in a new tab). You can now pass a shouldResize handler that allows you to cancel a resize event. In addition we added a direction attribute to the resize params for onResize and shouldResize.

That's it!

If you have any questions or feedback, you can contact me on Twitter (opens in a new tab) or join our Discord (opens in a new tab). React Flow is an independent company financed by its users. If you want to support us you can sponsor us (opens in a new tab) on Github or subscribe to one of our Pro plans (opens in a new tab).