How to Add Hyperlinks to Nodes using Text Elements in Syncfusion React Diagrams

The Syncfusion® React Diagram offers powerful customization capabilities, especially through the setNodeTemplate function, which allows you to define both the style and functionality of nodes. This function is particularly effective when working with Automatic layouts, as it is invoked for each node during the diagram’s initialization.

To add hyperlinks to nodes, you can use the TextElement class. This allows you to make text within a node clickable, providing users direct access to external resources or websites by defining a URL. The ability to add hyperlinks enhances the interactivity of your diagrams, giving users the ability to navigate to relevant links directly from within the diagram nodes.

Begin by creating a StackPanel, which serves as a container for your diagram elements. Inside this panel, create a TextElement to display text. Use the content property to set the text for the node and set the hyperlink.link property to specify the URL associated with the text.

Here’s how you can add a hyperlink to a node:

function App{
const setNodeTemplate = (obj) => {
   const content = new StackPanel();
   content.id = obj.id + '_outerstack';
   content.orientation = 'Horizontal';
   content.style.strokeColor = 'gray';
   content.padding = { left: 5, right: 10, top: 5, bottom: 5 };
   
   // Initiate TextElement
   const text = new TextElement();
   text.id = obj.id + randomId();
   // Add content of the TextElement
   text.content = obj.data.Name;
   // Add Link of the hyperlink 
   text.hyperlink = { link: 'https://ej2.syncfusion.com/home/react.html#platform' };
   content.children = [text];
    return content;
 };

 return (
   <div className="content-section">
     <DiagramComponent
       id="diagram" width={'100%'} height={'900px'}
       getNodeDefaults={getNodeDefaults}
       getConnectorDefaults={getConnectorDefaults}
       layout={layout} dataSourceSettings={dataSourceSettings}
       setNodeTemplate={setNodeTemplate}
     >
       <Inject services={[DataBinding, HierarchicalTree]} />
     </DiagramComponent>
   </div>
 );
}; 

This approach enriches the diagram’s functionality by enabling users to access external resources or websites directly through clickable links embedded in the diagram nodes.

Sample: Click Here

Conclusion
I hope you learned about embedding a hyperlink into the nodes in a layout diagram. You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation on how to quickly get started with configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!