Guides

After construct a simple & functional ReactFlow. We can implement more features

Custom Nodes

Custom nodes allow us to define:

multiple source
target hanldes
render form inputs or charts

Objective: implement a node with an input field that updates some text in another part of the application

Implementing the Custom Node

Objective: create a custom node component named TextUpdaterNode:

using Handle component
To able to connect custom node with other nodes
Add an input field in the node

import { useCallback } from 'react';
import { Handle, Position } from 'reactflow';

const handleStyle = { left: 10 };

const TextUpdaterNode = ({ data }) => {
  const onChange = useCallback(evt => {
    console.log(evt.target.value);
  }, []);

  return (
    <>
      <Handle type={'target'} position={Position.Top} />
      <div>
        <label htmlFor={'text'}>Text:</label>
        <input
          id={'text'}
          name={'text'}
          onChange={onChange}
          className={'nodrag'} 
        />
      </div>
      <Handle type={'source'} position={Position.Bottom} id={'a'} />
      <Handle
        type={'source'}
        position={Position.Bottom}
        id={'b'}
        style={handleStyle}
      />
    </>
  );
};

Where:

class name "nodrag" prevent dragging within the input fields

Guides

Custom Nodes

Implementing the Custom Node

Adding the Node Type