Terms and Definitions
In this part of the docs, we explain some basic React Flow terms and definitions. Three things you’ll be using a lot in React Flow are nodes, edges, and handles.
Nodes
A node in React Flow is a React component. That means it can render anything you like. Each node has an x- and y-coordinate, which tells it where it is placed in the viewport. By default, a node looks like in the example above. You can find all the options for customizing your nodes in the Node options documentation.
Custom Nodes
This is where the magic of React Flow happens. You can customize nodes to look and act however you would like. Much of the functionality you might create is not built-in to React Flow. Some of the things you might do with a custom node are:
- Render form elements
- Visualize data
- Support multiple handles
Please refer to the custom node docs for further information.
Handles
A handle (also called “port” in other libraries) is the place where an edge attaches to a node. The handle can be placed anywhere, and styled as you like. It’s just a div element. By default, it appears as a grey circle on the top, bottom, left, or right of the node. When creating a custom node, you can have as many handles as you need in your node. More information can be found in the handle docs.
Edges
An edge connects two nodes. Every edge needs a target and a source node. React Flow comes with four built-in edges types: default (bezier), smoothstep, step and straight. An edge is SVG path that can be styled with CSS and is completely customizable. If you are using multiple handles, you can reference them individually to create multiple connections for a node.
Custom Edges
Like custom nodes, you can also customize edges. Things that people do with custom edges are:
- Add a button to remove an edge
- Custom routing behavior
- Complex styling or interactions that cannot be solved with just one SVG path
You can find more information on the custom edges api site.
Connection Line
React Flow has built-in functionality to click-and-drag from one handle to another in order to create a new edge. While dragging, the placeholder edge is called a connection line. The connection line also comes with four types built-in and is customizable. You can find the props for configuring the connection line in the props section.
Viewport
All of React Flow exists inside of the viewport. The viewport has x, y and zoom values. When you drag the pane, you change the x and y coordinates and when you zoom in or out you alter the zoom level.