React-Component as content

[Tobias Koller]

hi,

is it possible to use a regular react-component as a node.shape?

I only know the way of converting to html-code but this has some drawbacks because content is not rerendered and some other things will not work propery..

nodeModel.shape = {type: "HTML", content: ReactDOMServer.renderToString(my_react_element)};

best regards

Tobias

[Aravind Ravi]

Hi Tobias, 

We have created a simple sample to render the React component inside the diagram node. Instead of using the HTML content as string, you can use the native HTML template to render the HTML node in the diagram. In the HTML template you can add your React component. Please refer to the below code snippet and sample 

{ 

    id: 'node1', 

    height: 100, 

    width: 100, 

    offsetX: 200, 

    offsetY: 100, 

    shape: { 

      type: 'HTML', 

    }, 

  },

const Component1 = () => { 

  return <h3>React Component</h3>; 

}; 

const Component2 = () => { 

  return ( 

    <div> 

      <h3>React</h3> 

      <h5>Component2</h5> 

    </div> 

  ); 

}; 

function diagramTemplate(props) { 

  if (props.id === 'node1') { 

    return ( 

      <div style={{ width: '100%' }}> 

/* Bind the component inside the diagramTemplate  */ 

        <div> 

          <Component1 /> 

        </div> 

      </div> 

    ); 

  } else if (props.id === 'node2') { 

    return ( 

      <div style={{ width: '100%' }}> 

        <div> 

          <Component2 /> 

        </div> 

      </div> 

    ); 

  } 

}

//Inside diagram component bind the diagram template component in the nodeTemplate property 

<DiagramComponent 

              id="diagram" 

              ref={(diagram) => (diagramInstance = diagram)} 

              width={'100%'} 

              height={'645px'} 

              nodes={nodes} 

              nodeTemplate={diagramTemplate} 

              connectors={connectors} 

              snapSettings={{ constraints: SnapConstraints.None }} 

            > 

Sample: https://stackblitz.com/edit/react-94qz4k 

  

Documentation: https://ej2.syncfusion.com/react/documentation/diagram/shapes/#html-node-with-template

Regards 

Aravind Ravi

[Tobias Koller]

hi Aravind,

thank you very much! that is what I was looking for.

Can you show me how to force the diagram to rerender a node when its content has changed?

In this case I show some custom text on the node which can be changed outside the node in a custom window.

Best regards

Tobias

[Tobias Koller]

ok I finally found the f

this._diagramInstance.refresh();

which seems to update the nodes...

Best regards

Tobias

[Aravind Ravi]

Hi Tobias 

 

Thanks for the update. 

 

Regards 

Aravind Ravi