Hi , how to have port name ?

[gjgit]

how to have the port name in output/input ?

inputs: [
        { id: "custom-port-1", alignment: "left", label: "one" },
        { id: "custom-port-2", alignment: "left", label: "two" },
      ],   

[michaelzusev]

Hi, this is my (admittedly hacky) solution, extended from the Custom Node example documentation:

import './App.css';
import 'beautiful-react-diagrams/styles.css';

import React from "react";
import Diagram, { createSchema, useSchema } from 'beautiful-react-diagrams';


function App() {
  // the diagram model
  const CustomNode = (props) => {
    const { inputs } = props;
    
    return (
      <div style={{ background: '#717EC3', borderRadius: '10px' }}>
        <div style={{ padding: '10px', color: 'white'  }}>
          Custom Node With Port Names
        </div>
        <div style={{marginTop: '20px'}}>
          {inputs.map((port) => React.cloneElement(port, {
            style: { width: '25px', height: '25px', background: '#1B263B' }
          }, <p style={{marginLeft:'30px'}}>{port.props.name}</p>))}
         
        </div>
      </div>
    );
  };
  
  const initialSchema = createSchema({
    nodes: [
      { 
        id: 'node-1', 
        content: 'Node 1', 
        coordinates: [150, 60], 
        outputs: [ { id: 'port-1', alignment: 'right' } ], 
      },
      { 
        id: 'node-custom', 
        coordinates: [250, 60], 
        render: CustomNode,
        inputs: [ { id: 'custom-port-1',  alignment: 'left', name:'Test' },
                  { id: 'custom-port-2', alignment: 'left', name: 'anothertest'} ],
      },
    ]
  });
  
  const UncontrolledDiagram = () => {
    // create diagrams schema
    const [schema, { onChange }] = useSchema(initialSchema);
  
    return (
      <div style={{ height: '22.5rem' }}>
        <Diagram schema={schema} onChange={onChange} />
      </div>
    );
  };
  return <UncontrolledDiagram />
}

export default App;

Makes this:

There's probably a better way of doing it though!