How to Create Multiple Symbol Palettes with Tabs in React Diagram?

To create multiple symbol palettes with tabs in the React Diagram, you need to manage tab data, dynamically render tab headers, and initialize palettes and diagrams for each tab. This approach provides an interactive interface for switching between different sets of symbols. Below are the key components and their implementation details.

Managing Tab Data and Event Listeners
Use React state hooks to store tab data and track the active tab index. Event handlers are used to add new tabs and symbols dynamically.

const [tabs, setTabs] = useState([]); // State to store all tabs
const [activeTabIndex, setActiveTabIndex] = useState(0); // Track active tab index

const addTab = useCallback((initialize = false) => {
   const newTab = createNewTabData();
   setTabs(prevTabs => {
       const newTabs = [...prevTabs, newTab];
       if (initialize) {
           setActiveTabIndex(newTabs.length - 1);
       }
       return newTabs;
   });
}, []);

const addSymbol = useCallback(() => { // Add a new symbol to the active tab
   const tab = tabs[activeTabIndex];
   if (!tab) return;

   const paletteId = tab.palettes[0].id;
   if (!paletteId) return;

   const newSymbol = {
       id: 'Decision' + generateId(),
       shape: { type: 'Flow', shape: 'Decision' },
       style: { strokeWidth: 2, fill: '#ffff99' },
   };
   // Update the state to include the new symbol
   setTabs(prevTabs => {
       const newTabs = [...prevTabs];
       const updatedTab = { ...newTabs[activeTabIndex] };
       updatedTab.palettes = updatedTab.palettes.map(palette => ({
           ...palette,
           symbols: [...palette.symbols, newSymbol]
       }));
       newTabs[activeTabIndex] = updatedTab;
       // Update the palette instance with the new symbol
       const paletteElement = document.getElementById(`palette-${tab.id}`);
       const paletteInstance = paletteElement?.ej2_instances?.[0];
       if (paletteInstance) {
           try {
               paletteInstance.addPaletteItem(paletteId, newSymbol);
           } catch (e) {
               console.error('Failed to add symbol:', e);
           }
       }

       return newTabs;
   });
}, [tabs, activeTabIndex]);

Creating and Rendering Tabs
Render tab headers dynamically using map() and update the active tab index on click.

<ul className="nav nav-tabs">
   {tabs.map((tab, index) => (
       <li key={tab.id} className={index === activeTabIndex ? 'active' : ''}>
           # {
                   e.preventDefault();
                   setActiveTabIndex(index);
               }}
           >
               Tab {index + 1}
           </a>
       </li>
   ))}
</ul>

Initializing Palette and Diagram
React automatically binds the SymbolPaletteComponent and DiagramComponent to the tab data.

<SymbolPaletteComponent
   id={`palette-${tab.id}`}
   width="100%"
   height="700px"
   palettes={tab.palettes}
   symbolHeight={80}
   symbolWidth={80}
   getNodeDefaults={(node) => {
       node.style = node.style || {};
       node.style.fill = node.style.fill || '#ffff99';
       return node;
   }}
/>

<DiagramComponent
   id={`diagram-${tab.id}`}
   width="100%"
   height="645px"
   nodes={tab.nodes}
/>
``

Displaying Active Tab Content
Render only the active tab’s content using conditional rendering.

<div className="tab-content">
   {tabs.map((tab, index) => (
       <TabContent
           key={tab.id}
           tab={tab}
           isActive={index === activeTabIndex}
       />
   ))}
</div>

Initializing the First Tab
Automatically create and initialize the first tab when the component loads.

useEffect(() => {
   addTab(true);
}, []);

Refer to the working sample for additional details: View Sample

Conclusion

We hope this article helped you learn how to create multiple symbol palettes with tabs in the React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for 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, BoldDesk Support, or feedback portal. We are always happy to assist you!