Load tab items dynamically in React Tab component
29 Aug 202313 minutes to read
Tabs can be added dynamically by passing array of items and index value to the addTab method.
// New tab title and content inputs are fetched and stored in local variable
let title: string = document.getElementById('tab-title').value;
let content: string = document.getElementById('tab-content').value;
// Required tab item object formed by using textbox inputs
let item: Object = { header: { text: title }, content: createElement('pre', { innerHTML: content.replace(/\n/g, '<br>\n') }).outerHTML };
// Item object and the index argument passed into the addTab method to add a new tab
this.addTab([item], this.totalItems-1);In the following demo, you can add the tab content by clicking the +. This + icon is added on the tab header using iconCss property. Enter the new Tab heading and content details in the available text boxes, click ‘Add Tab’ button to pass the details as an array and here last index is calculated to append the new tab at the end.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { Tooltip } from '@syncfusion/ej2-popups';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
function App() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let tabInstance;
const tabCreated = () => {
const tooltip = new Tooltip({
content: 'Add Tab'
});
tooltip.appendTo('.e-ileft.e-icon');
document.getElementById('btn-add').onclick = (e) => {
const title = document.getElementById('tab-title').value;
const content = document.getElementById('tab-content').value;
const ele = document.createElement("pre");
ele.innerHTML = content.replace(/\n/g, "<br>\n");
// tslint:disable-next-line: ban-types
const item = { header: { text: title }, content: ele.outerHTML };
const totalItems = document.querySelectorAll('#element .e-toolbar-item').length;
document.getElementById('tabelement').ej2_instances[0].addTab([item], totalItems - 1);
};
};
const tabSelected = (args) => {
if (args.selectedIndex === document.querySelectorAll('#element .e-toolbar-item').length - 1) {
document.getElementById('tab-title').value = '';
document.getElementById('tab-content').value = '';
}
};
let headertext;
headertext = [{ text: "Twitter" }, { 'iconCss': 'e-add-icon' }];
return (<TabComponent id='tabelement' ref={tab => tabInstance = tab} created={tabCreated} selected={tabSelected}>
<TabItemsDirective>
<TabItemDirective header={headertext[0]} content={'#tab1_content'}/>
<TabItemDirective header={headertext[1]} content={'#form-container'}/>
</TabItemsDirective>
</TabComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective, SelectEventArgs } from '@syncfusion/ej2-react-navigations';
import { Tooltip } from '@syncfusion/ej2-popups';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
function App() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let tabInstance: TabComponent | any;
const tabCreated = (): void => {
const tooltip: Tooltip = new Tooltip({
content: 'Add Tab'
});
tooltip.appendTo('.e-ileft.e-icon');
(document.getElementById('btn-add') as any).onclick = (e: Event) => {
const title: string = (document.getElementById('tab-title') as any).value;
const content: string = (document.getElementById('tab-content') as any).value;
const ele = document.createElement("pre");
ele.innerHTML = content.replace(/\n/g, "<br>\n");
// tslint:disable-next-line: ban-types
const item: Object = { header: { text: title }, content: ele.outerHTML };
const totalItems = document.querySelectorAll('#element .e-toolbar-item').length;
(document.getElementById('tabelement') as any).ej2_instances[0].addTab([item], totalItems - 1);
};
}
const tabSelected = (args: SelectEventArgs): any => {
if (args.selectedIndex === document.querySelectorAll('#element .e-toolbar-item').length - 1) {
(document.getElementById('tab-title') as any).value = '';
(document.getElementById('tab-content') as any).value = '';
}
}
let headertext: any;
headertext = [{ text: "Twitter" }, { 'iconCss': 'e-add-icon' }];
return (
<TabComponent id='tabelement' ref={tab => tabInstance = tab} created={tabCreated} selected={tabSelected}>
<TabItemsDirective>
<TabItemDirective header={headertext[0]} content={'#tab1_content'} />
<TabItemDirective header={headertext[1]} content={'#form-container'} />
</TabItemsDirective>
</TabComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Tab</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='container'>
<div id="tab1_content" style="display: none">
<ul>
<li>Click on the "+" header to add dynamic tab items. </li>
<li>It displays input elements to get the new tab information. </li>
<li>Add details and click the "Add Tab" button to open the newly added tab.</li>
</ul>
</div>
<div id="form-container" style="display: none">
<div class="e-float-input">
<input type="text" id="tab-title" required="" />
<span class="e-float-line"></span>
<label class="e-float-text">Enter header title</label>
</div>
<br />
<div class="e-float-input">
<textarea rows="5" type="text" id="tab-content" required=""></textarea>
<span class="e-float-line"></span>
<label class="e-float-text">Enter content</label>
</div>
<br />
<div class="btn-section">
<button id="btn-add" class="e-btn">Add Tab</button>
<br />
<br />
<span class="info"> * Title is mandatory to add a new Tab</span>
</div>
</div>
<div id='element'>
<div id='loader'>Loading</div>
</div>
</div>
</body>
</html>