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.

Permalink

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.flowToScreenPosition for completion

Besides that we fixed some bugs 🐛 You can find all change in the v11.10.0 Github release (opens in a new tab).

Permalink

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.

Permalink

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).

Permalink