💡 This is the legacy site for v11. If you are looking for the latest docs, please visit React Flow
Reference
API Reference

API Reference

This reference attempts to document every function, hook, component, and type exported by React Flow. If you are looking for guides and tutorials, please refer to our learn section.

How to use this reference

We think that documentation should answer two broad questions: "what is this thing?" and "how do I use it?"

To that end, our API reference aims to concisely answer that first question and learn section goes into more detail on the second. If you find yourself clicking around the reference wondering what the heck any of this means, maybe we have a guide that can help you out!

A note for our long-term users

If you're coming here from our old API pages things might look a bit different! We've reorganized our documentation to make it easier to look things up if you know what you're looking for. All our types, components, hooks, and util functions get their own page now to help you find exactly what you need.

If you're new to React Flow or you're not sure where to look for something, take a look at the section below.

A note for JavaScript users

React Flow is written in TypeScript, but we know that not everyone uses it. We encourage developers to use the technology that works best for them, and throughout our documentation there is a blend of TypeScript and JavaScript examples.

For our API reference, however, we use TypeScript's syntax to document the types of props and functions. Here's a quick crash course on how to read it:

? means that the field or argument is optional.

<T> in a type definition represents a generic type parameter. Like a function argument but for types! The definition type Array<T> = ... means a type called Array that takes a generic type parameter T.

<T> when referring to a type is like "filling in" a generic type parameter. It's like calling a function but for types! The type Array<number> is the type Array with the generic type parameter T filled in with the type number.

T | U means that the type is either T or U: this is often called a union.

T & U means that the type is both T and U: this is often called an intersection.

The TypeScript folks have their own handy guide for reading types (opens in a new tab) that you might find useful. If you're still stuck on something, feel free to drop by our Discord (opens in a new tab) and ask for help!