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!

Custom nodes

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.

Layouting

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.

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!