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.
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
There are several ways 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. 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 .
We added a new
onError 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.
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
type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>;
This allows you to create more specific node types that are aware of their
data structure and
Node Resizer 2.0
We also released a new major version of the
@reactflow/node-resizer package. 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
If you have any questions or feedback, you can contact me on Twitter or join our Discord. React Flow is an independent company financed by its users. If you want to support us you can sponsor us on Github or subscribe to one of our Pro plans.