Timeline
What's new?
We're always working on the React Flow docs and the library.
This is a timeline of the things we've added or changed so far.
New example published!
Quite a while back, a user opened a GitHub issue (opens in a new tab) asking us to add the ability to draw multiple connection lines to the library. We don't have any plans to add this to the library itself, but we hope this example helps folks who need this functionality in their own apps. Check it out here.
New ELKjs example
We added a new example for a more advanced usage of ELKjs (opens in a new tab) to show how to use it with nodes with multiple handles. As you can see in the example, edge crossing is handled automatically by ELKjs and the nodes are ordered with help of the handle position. Check it out here.
New example published!
Buried away in our API reference is the documentation for our
<NodeToolbar /> component. We've been missing
an example to accompany it though, so we've published a new example to show how
it can be used. Check it out here.
The first annual React Flow Developer Survey launches!
We've been doing this React Flow thing for a while now and between issues on GitHub and conversations on our Discord server (opens in a new tab), we've learned a lot about what our users want and need from the library. It's a lot harder to hear about people's experience with our docs or from the large number of users that might not be actively taking part in our communities, though.
In the past we've arranged interviews with some of our Pro subscribers to get an idea of how they use React Flow and the Pro Platform and found the insight invaluable. This year we want to expand that to include as many of our users as possible, so we've put together a short survey to help steer our direction going into the new year.
It should only take a few minutes to complete and we'd really appreciate it if you could find the time to fill it out. You can find the survey here (opens in a new tab) and we'll be publishing the results early in the new year!
React Flow Pro Platform goes open source!
We fund our open source libraries with React Flow Pro (opens in a new tab) subscriptions. Subscribers get access to our Pro Platform where they can view advanced examples, contact us for 1:1 support, and help us prioritize GitHub issues. So far that code has been private but we've rebuilt it from the ground-up, added features, refreshed the design, and gave it the MIT License it deserves.
It's not plug-and-play at the moment, but we hope that some folks take a look, get inspired for their own projects, and that our Pro Subscribers like the new features we built.
New guide published!
We've added a new guide to show folks how to create their own custom edges. This
guide breaks down what the <BaseEdge />
and <EdgeLabelRenderer />
components are for, and shows how to use some of the
path utilities React Flow provides.
You can check it out in the customization section of our learning resources here.
New release 11.10.0!
We want to make the migration for v12 as smooth as possible. That's why we added deprecation warnings for the following util functions:
Rename useReactFlow.project to useReactFlow.screenToFlowPosition
⚠️ changes: no need to subtract react flow bounds anymore!
before:
const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
const position = reactFlowInstance.project({
x: event.clientX - reactFlowBounds.left,
y: event.clientY - reactFlowBounds.top,
});
after:
const position = reactFlowInstance.screenToFlowPosition({
x: event.clientX,
y: event.clientY,
});
Rename getTransformForBounds to getViewportForBounds
⚠️ changes: returns { x: number, y: number, zoom: number } instead of [number, number, number].
before:
const [x, y, zoom] = getTransformForBounds(bounds, width, height, 0.5, 2);
after:
const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2);
Rename getRectOfNodes to getNodesBounds
no changes, just a renaming.
New features
- added
useReactFlow.flowToScreenPositionfor completion
Besides that we fixed some bugs 🐛 You can find all change in the v11.10.0 Github release (opens in a new tab).
New example published!
The "Prevent connection cycles" example shows how to use the
getOutgoers util to check if a new
connection would cause a cycle in the flow. Check it out here.
We refreshed our docs!
We refreshed the React Flow docs in November 2023, so things might look a little different around here:
-
Docs is now called Learn. This section aims to answer the question of "how do I use X?"
-
API is now called Reference. This section answers the question "what is this thing?" A big change from the previous version of our docs is that all of our types, components, hooks, and util functions now get their own page now.
-
"How to" blog posts now live in Learn > Tutorials
Why the changes?
So far the docs have been growing organically since 2019, without any sort of overarching concept. While we worked on a website redesign, we decided it was time to rethink how folks are using our docs so that we can create a better developer experience. Our hope is that these changes make the docs easier to use for both experienced React Flow users and newcomers.
We also did a change of tech stack along the way. We were using Docusaurus, and now we're using Nextra (opens in a new tab). Cool beans.
If you find anything to change or improve, just click on the "Edit this page" link on the right-side of any page in our docs or open an issue over on GitHub (opens in a new tab).