React flow - Concept

Overview

React flow 내용 정리. 원문은 이곳<ref>https://reactflow.dev/learn</ref>에서 확인할 수 있다.

Introduction

Key features

Buillt-in plugins

• The <Background /> plugin implements some basic customisable background patterns.
• The <MiniMap /> plugin displays a small version of the graph in the corner of the screen.
• The <Controls /> plugin adds controls to zoom, center, and lock the viewport.
• The <Panel /> plugin makes it easy to position content on top of the viewport.
• The <NodeToolbar /> plugin lets you render a toolbar attached to a node.
• The <NodeResizer /> plugin makes it easy to add resize functionality to your nodes.

Definitions

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. You can find all the options for customizing your nodes in the Node options<ref>https://reactflow.dev/api-reference/types/node</ref> 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 that 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.

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 fight of the nodes you can has as many handles as you need in your node. More information can be found in the handle docs<ref>https://reactflow.dev/api-reference/components/handle</ref>.

Edges

An edge connects two nodes. Every edge needs a target and a source node. React Flow comes with four built-in edge typee:default(bezier), smoothstep, step and straight. An edge is SVG path that can be styled with OSS 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 behaviour.
• Complex styling or interactions that cannot be solved with just one SVG path.

You can find more information on the custom edges api<ref>https://reactflow.dev/api-reference/types/edge-props</ref> 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 in the props section<ref>https://reactflow.dev/api-reference/react-flow#connection-line</ref>.