Add node button always at the end of the flow

[Adam-Collier]

Hi guys, starting playing around with react flow this week and I'm wanting to add something like the below:

Where there is always an add button at the end so you can easily add another node to the end :) If you have some code you could share that would be great! But if not, if you could share the approach I should take that would be wonderful

[bcakmakoglu]

Well, this is basically a pro example, which you can access for a subscription.

[Adam-Collier]

Ahh man I didn't realise it was in an example only available in the pro subscription 😅 I don't mind implementing it myself, I just need an idea of how I could potentially go about creating it

[moklick]

It's a custom node in the form of a button.

[edman-cota]

I have done something similar and had to use a relative div as a workaround:

I have to create a custom node like this:

import Connector from './Connector';


const CustomNode = ({ id, data }) => {
  return (
    <>
      <div className='custom-node__header'>
        <div className='custom-node__header-label'>{data.label}</div>
        <div className='custom-node__header-title'>{data.header.title}</div>
      </div>
      <div className='custom-node__body'>
        <Connector />
      </div>
    </>
  );
};

export default CustomNode;

Then my Connector component:

import styles from './Connector.module.scss';
import { MdOutlineAdd } from 'react-icons/md';

const Connector = () => {
  const handleConnectoClicked = () => {
    console.log('Clicked');
  };

  return (
    <div className={styles.connector}>
      <div className={styles.lineConnector}></div>
      <div className={styles.nodeConnector} onClick={handleConnectoClicked}>
        <MdOutlineAdd />
      </div>
    </div>
  );
};

export default Connector;

And it's css like this:

.connector {
  position: absolute;
  right: -50px;
  width: 50px;
  align-items: center;
  display: flex;
  justify-content: center;

  .lineConnector {
    flex: 1;

    white-space: nowrap;
    position: relative;
    overflow: hidden;

    &::after {
      content: '-----';
      letter-spacing: 1px;
      font-size: 10px;
      color: #9cbfdb;
      display: inline-block;
      vertical-align: 2px;
    }
  }

  .nodeConnector {
    height: 26px;
    width: 26px;
    border-radius: 50%;
    background-color: #03989e;
    cursor: pointer;
    display: flex;
    fill: white;
    color: white;
    justify-content: center;
    align-items: center;
  }
}

I hope this would help you.

[perepalacin]

Hey thanks a lot for your idea, my question with this is then, how do you trigger a function on the parent component when the Connector is clicked?
Thanks!

[bompi88]

Just pass it down to the connector