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.
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 powerful feature of React Flow is the ability to add custom nodes. Within your custom nodes you can render everything you want. You can define multiple source and target handles and render form inputs or charts for example. In this guide we will implement a node with an input field that updates some text in another part of the application.Read more
We regularly get asked how to handle layouting in React Flow. While we could build some basic layouting into React Flow, we believe that you know your app's requirements best and with so many options out there we think it's better you choose the best right tool for the job. In this guide we'll look at four layouting libraries and how to use them.Read more
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.
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> 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
Array with the generic type parameter
T filled in with the type
T | U means that the type is either
U: this is often called a
T & U means that the type is both
U: this is often called an
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!