React Circulation 11 Launch – React Circulation

Loads has occurred since we revealed our final weblog put up six months in the past. We bought our first professional subscribers, we employed John who helps us with the docs, communication and group and we’re all working full time on React Circulation 🥳. Immediately we’re releasing a brand new main model with plenty of new options and only a few breaking modifications (not like the final main replace..).

In case you are searching for the knowledge easy methods to improve, please confer with the “Migrate to v11” information.

TLDR;​

• React Circulation has a brand new package deal title -> reactflow
• Higher accessibilty by default (keyboard controls, aria- defaults)
• Cleaner edge routing for smoothstep and step edges
• Higher selectable edges with a brand new interactionWidth choice
• New hooks: useNodesInitialized, useOnViewportChange and useOnSelectionChange

🎉 A New Package deal Identify​

The largest change, is that we bought a brand new package deal title! A really good individual gave us the reactflow npm package deal title and we additionally bought the @reactflow group. So any further, you may set up React Circulation by way of:

after which use it as earlier than:

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/type.css';

...

<ReactFlow nodes={nodes} edges={edges}>
  <Controls />
  <Background />
</ReactFlow>

Appears good, proper? Underneath the hood we’re publishing packages individually within the @reactflow group. These packages are utilized by the principle reactflow package deal and in addition may be used individually. For this we have rebuilt React Circulation to a monorepo powered by turborepo, Rollup and Vite.

✨ New Options​

For this launch, we centered on accessibility (nothing higher for a v11 launch than a11y!) and edges, with another smaller updates and stability fixes alongside the way in which.

Accessibility​

Accessibility was fairly restricted within the earlier variations and we put loads of work into it to make it higher by default. Now you can work together with a circulate along with your keyboard. You possibly can focus nodes and edges with Tab, choose a component with Enter and transfer nodes round with the arrow keys.

Furthermore we added default aria-labels to all parts on the pane and made them configurable with new ariaLabel choices for nodes and edges. You possibly can confer with the brand new Accessibility information for extra data.

Edge Routing and Edge Choice​

Whereas in v10, the nodes had been a bit extra within the highlight, this time we have put a particular deal with the sides. Lots of people complained that skinny edges are laborious to pick. We have mounted that by introducing a brand new interactionWidth edge choice. Its default worth is 20, which means {that a} 20px large invisible edge will get painted under the seen edge for a neater interplay.

One other massive replace is an entire rewrite of the sting routing for smoothstep and step edge sorts.

That is not all. We additionally revised the sting replace behaviour, added pathOptions for default and smoothstep edges and a brand new deletable flag. For making it simpler to develop customized edges we’re exporting a <BaseEdge /> element that may draw the invisible helper edge and the label for you.

Node Positioning​

To make layouting simpler, we have added a brand new prop known as nodeOrigin. The origin was all the time within the high left, which means that it’s worthwhile to subtract half the width and peak to heart a node. Now you may set nodeOrigin={[0.5, 0.5]} to set the origin to the middle or nodeOrigin={[1, 1]} to set it to the underside proper.

Moreover we have applied a useNodesInitialized hook. It returns a boolean that can be utilized to find out if all nodes are initialized and a brand new format needs to be performed, for instance. One other small change is that you may pan over a node when it is not draggable which makes it simpler to navigate larger flows.

New Hooks​

Sooner or later we need to eliminate some <ReactFlow /> element props (there are 140+ 😵‍💫). One concept is to exchange some props by way of hooks. With this launch we’re including the useOnViewportChange and the useOnSelectionChange hook. Earlier than this launch you would solely take heed to a viewport change by utilizing onMoveStart, onMove and onMoveEnd. With the brand new useOnViewportChange hook, you may simply take heed to modifications in each element.

Miscellaneous​

The background bought a new variant cross, and you’ll management the hole measurement horizontally and vertically individually for all variants. We have added new handlers that make it simpler so as to add mouse occasion handlers to the pane (the realm under the nodes): onPaneMouseEnter, onPaneMouseMove and onPaneMouseLeave. Final however not least the cursor is a grabbing hand whereas dragging the pane or a node and also you pan over nodes when they aren’t draggable. Unusual that this wasn’t all the time the case?!

What’s Subsequent?​

React Circulation isn’t just the library. It is the web site with the docs and the examples, the professional platform and in addition the group on Github and Discord! Within the upcoming weeks and months we need to make the onboarding for builders and particularly newbie builders simpler. For that we’re engaged on an in-depth getting began information and simpler to know docs basically. We’re additionally rebrushing the professional platform so that you could get extra out of the professional examples.

Thanks for being part of the React Circulation group, and comfortable coding! ✌🏻