Plugin Components

React Flow comes with several additional plugin components. In this guide we show you how to use them. We are using our previous example code here.

MiniMap

If your flow gets bigger, you might want to get an overview quickly. For this we have built the MiniMap component. You can easily add it to your flow by adding it as a children:

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Controls

React Flow comes with a customizable controls bar, that you can use by importing the Controls component

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Background

If you want to display the pattern background, you can use the Background component

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Panel

A helper component to display content on top of the React Flow viewport. Panel component

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}