React flow- Getting Started

Overview

Reactflow 정리 문서 원문은 이곳<ref>https://reactflow.dev/learn/getting-started/installation-and-requirements</ref>에서 확인할 수 있다.

Installation

Installation and Requirements

The React Flow package is published under reactflow on npm and installable via:

$ npm install reactflow

Now you can import the React Flow component and the styles in your application:

import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

Prior Experience Needed

React Flow is a React library. That means React developers will feel comfortable using it. If basic React terms and concepts like states, props, components, and hooks are unfamiliar to you, you might need to learn more about React before being able to use React Flow fully.

Building a Flow

Getting Started

Let's create an empty flow with a controls panel and a background. For this we need to import the components from the reactflow package:

import ReactFlow, { Background, Controls } from 'reactflow';

We can now use the components to render an empty flow:

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

There are three important things to keep in mind here:

• You need to import the styles. Otherwise, React Flow won't work.
• The parent container needs a width and height, because React Flow uses its parent dimensions.
• If you have multiple flows on one page, you need to pass a unique id prop to each component to make React Flow work properly.

Adding Nodes

Now that the flow is set up, let's add some nodes. To do this, you need to create an array with node objects like this:

const nodes = [
  {
    id: '1',  // required
    position: { x: 0, y: 0}, // required
  },
];

These nodes can now be added to the flow:

import ReactFlow, {Controls, Background} from 'reactflow';
import 'reactflow/dist/style.css';

const nodes = [
  {
    id: '1',
    position: {x: 0, y: 0},
  },
];

function Flow() {
  return(
    <div style={{ height: '100%' }}>
      <ReactFlow nodex={nodes}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

Let's add another node, configure labels and use the node type input for the first node.

const nodes = [
  {
    id: '1',
    position: {x: 0, y: 0},
    data: {label: 'Hello'},
    type: 'input',
  },
  {
    id: '2',
    position: {x: 100, y: 100},
    data: { label: 'World' },
  },
];

Adding an Edge

Now that we have two nodes, let's connect them with an edge.

To make an edge, we need to specify two attributes: the source node(where the edge begins) and the target node(where the edge ends). We use the id of the two nodes to specify this (in our example, our two nodes have ids of "1" and "2"):

const edges = [{id: '1-2", source: '1', target: '2'}]

Let's give this edge two properties that are built into React Flow, a label and a different type.

const edges = [
  {
    id: '1-2',
    source: '1',
    target: '2',
    label: 'to the',
    type: 'step',
  },
];

Adding Interactivity

Let's make it so we can select, drag, and remove nodes and edges.

In this Getting Started tutorial, we are going to use a "controlled component", which is typically the best and most flexible way to use React Flow in your own applications. You can also use React Flow in an uncontrolled way.

Handle Change Events

First let's import a few things. To manage the changes in React, we'll be using useState and the two helper function applyEdgeChanges and applyNodeChanges from React Flow.

import {useState, useCallback } from 'react';
import ReactFlow, {applyEdgeChanges, applyNodeChanges} from 'reactflow';

We're going to set up states for both the nodes and edges:

const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);

Directly beneath that, we'll add these two functions:

const onNodesChange = useCallback(
  (changes) => setNode((nds) => applyNodeChanges(changes, ndx)),
  [],
);

const onEdgesChange = useCallback(
  (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
  [],
);

When you drag or select a node, the onNodeChange handler gets called. With help of the applyNodeChanges function you can then apply those changes to your current node state.