react-dyn-tabs
Advanced tools
React Dynamic Tabs with full API
Support react >=
v16.8.0
$ npm install react-dyn-tabs --save
or
$ yarn add react-dyn-tabs
import React from 'react';
import 'react-dyn-tabs/style/react-dyn-tabs.css';
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
import useDynTabs from 'react-dyn-tabs';
export default () => {
const options = {
tabs: [
{
id: '1',
title: 'tab 1',
panelComponent: (porps) => <p> panel 1 </p>,
},
{
id: '2',
title: 'tab 2',
panelComponent: (porps) => <p> panel 2 </p>,
},
],
selectedTabID: '1',
};
const [TabList, PanelList] = useDynTabs(options);
return (
<>
<TabList></TabList>
<PanelList></PanelList>
</>
);
};
import React from 'react';
import 'react-dyn-tabs/style/scss/react-dyn-tabs.scss';
import 'react-dyn-tabs/themes/scss/react-dyn-tabs-card.scss';
import useDynTabs from 'react-dyn-tabs';
export default () => {
const options = {
tabs: [
{
id: '1',
title: 'tab1',
panelComponent: (porps) => <p> panel 1 </p>,
},
{
id: '2',
title: 'tab2',
panelComponent: (porps) => <p> panel 2 </p>,
},
],
selectedTabID: '1',
};
let _instance;
const [TabList, PanelList, ready] = useDynTabs(options);
ready((instance) => {
_instance = instance;
});
const addTab3 = function () {
// open tab 3
_instance.open({id: '3', title: 'Tab 3', panelComponent: (porps) => <p> panel 3 </p>}).then(() => {
console.log('tab 3 is open');
});
// switch to tab 3
_instance.select('3').then(() => {
console.log('tab 3 is selected');
});
};
return (
<>
<button onClick={addTab3}>Add tab 3</button>
<TabList></TabList>
<PanelList></PanelList>
</>
);
};
NOTE :
Tabs can't be manipulated safely before the first render, use ready() to make a function available after the component is mounted.
ready function and instance Object will not be changed after re-rendering multiple times.
| type | default value | required | description |
|---|---|---|---|
|
Array of tabData | [] | false | initial opened tabs |
Example
const [TabList, PanelList, ready] = useDynTabs({
tabs: [
{
id: '1',
title: 'home',
iconClass: 'fa fa-home',
closable: true,
panelComponent: (porps) => <p> home content </p>,
},
{
id: '2',
title: 'contact',
tooltip: 'contact',
disable: true,
closable: false,
panelComponent: (porps) => <p> contact content </p>,
},
],
});
| type | default value | required | description |
|---|---|---|---|
| string | ' ' | false | initial selected tab id |
Example
const [TabList, PanelList, ready] = useDynTabs({
tabs: [
{
id: '1',
title: 'home',
iconClass: 'fa fa-home',
closable: true,
panelComponent: (porps) => <p> home content </p>,
},
{
id: '2',
title: 'contact',
tooltip: 'contact',
disable: true,
closable: false,
panelComponent: (porps) => <p> contact content </p>,
},
],
selectedTabID: '2',
});
| type | default value | required | description |
|---|---|---|---|
| string | 'ltr' | false | can be either of 'ltr' or 'rtl' |
Example
const [TabList, PanelList, ready] = useDynTabs({direction: 'rtl'});
| type | required | description |
|---|---|---|
| React component | false | custom tab component |
Example
const [TabList, PanelList, ready] = useDynTabs({
tabComponent: (props) => {
const {id, isSelected, api: instance} = props;
return (
<button {...props.tabProps}>
{props.children}
{props.iconProps && <span {...props.iconProps}></span>}
</button>
);
},
});
Default value for panelComponent option.
| type | required | description |
|---|---|---|
| React component | React element | false |
Example
const [TabList, PanelList, ready] = useDynTabs({
defaultPanelComponent: (props) => {
const {id, isSelected, api: instance} = props;
return <div></div>;
},
});
| type | default value | required | description |
|---|---|---|---|
| boolean | true | false |
Example
const [TabList, PanelList, ready] = useDynTabs({accessibility: false});
NOTE :
This option assigns id attribute on panel element and button element inside the tab. for having elements without id attribute, set this option to false.
| type | default value | required | description |
|---|---|---|---|
| boolean | false | false |
Example
const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
| type | required | description |
|---|---|---|
| function | false | This event is fired only once, after first render |
Example
const [TabList, PanelList, ready] = useDynTabs({
onLoad: function () {
console.log('[onLoad]');
},
});
NOTE :
You can use 'this' keyword inside all callback options which refers to the instance object.
| type | required | description |
|---|---|---|
| function | false | This event is triggered after every render. |
Example
const [TabList, PanelList, ready] = useDynTabs({
onInit: function () {
console.log('[onInit]');
},
});
NOTE :
Do not use setState inside the onInit callback because it leads to an infinite loop.
| type | required | description |
|---|---|---|
| function | false | fires when we open|close|select a tab. this event is not fired initially |
Example
const [TabList, PanelList, ready] = useDynTabs({
onChange: function ({currentData, previousData, closedTabIDs, openedTabIDs}) {
console.log('[onChange]');
},
});
| type | required | description |
|---|---|---|
| function | false | fires when the user clicks on the tab, but before select them. This event should return boolean true or false, If the event return false the tab is not selected. |
Example
const [TabList, PanelList, ready] = useDynTabs({
beforeSelect: function (e, id) {
console.log('[beforeSelect]');
return true;
},
});
| type | required | description |
|---|---|---|
| function | false | fires after selecting a tab for the first time. It is not fired for the initial selected tab |
Example
const [TabList, PanelList, ready] = useDynTabs({
onFirstSelect: function ({currentSelectedTabId, previousSelectedTabId}) {
console.log('[onFirstSelect]');
},
});
| type | required | description |
|---|---|---|
| function | false | fires after selecting tabs. this event is not fired initially |
Example
const [TabList, PanelList, ready] = useDynTabs({
onSelect: function ({currentSelectedTabId, previousSelectedTabId}) {
console.log('[onSelect]');
},
});
| type | required | description |
|---|---|---|
| function | false | fires after opening tabs. this event is not fired initially |
Example
const [TabList, PanelList, ready] = useDynTabs({
onOpen: function (openedTabIDs) {
console.log('[onOpen]');
},
});
| type | required | description |
|---|---|---|
| function | false | fires when the user clicks on the close icon, but before close them. This event should return boolean true or false, If the event return false the tab is not closed. |
Example
const [TabList, PanelList, ready] = useDynTabs({
beforeClose: function (e, id) {
console.log('[beforeClose]');
return true;
},
});
| type | required | description |
|---|---|---|
| function | false | fires after closing tabs. this event is not fired initially |
Example
const [TabList, PanelList, ready] = useDynTabs({
onClose: function (closedTabIDs) {
console.log('[onClose]');
},
});
| type | required | description |
|---|---|---|
| function | false | fires before destroying useDynTabs hook |
Example
const [TabList, PanelList, ready] = useDynTabs({
onDestroy: function () {
console.log('[onDestroy]');
},
});
Return value : boolean
Parameters:
id: StringExample
const result = instance.isOpen('Your tab ID');
Triggers 'onInit', 'onChange' and 'onOpen' event. opening an already opened tab only triggers 'onInit' event.
Return value : Promise
Parameters:
tabData: ObjectExample
if (instance.isOpen('contact') == false) {
instance
.open({
id: 'contact',
title: 'contact',
tooltip: 'contact',
disable: false,
closable: true,
iconClass: '',
panelComponent: <ContactPanel></ContactPanel>,
})
.then(({currentData, instance}) => {
console.log('contact tab is open');
});
}
Return value : boolean
Parameters:
id: StringExample
const result = instance.isSelected('Your tab ID');
Makes current and previous selected tab to be re-rendered
Triggers 'onInit', 'onChange' and 'onSelect' event.
Selecting an already selected tab only triggers 'onInit' event.
Return value : Promise
Parameters:
id: stringExample
if (instance.isSelected('1') == false) {
instance.select('1').then(({currentData, instance}) => {
console.log('tab 1 is selected');
});
}
Triggers 'onInit', 'onChange' and 'onClose' event.
Closing an already closed tab only triggers 'onInit' event.
It switches to the previously selected tab before closing if switching parameter was true and tab was already opened and selected.
Return value : Promise
Parameters:
id: stringswitching: boolean (default : true)Example
if (instance.isOpen('2') == true) {
instance.close('2').then(({currentData, instance}) => {
console.log('tab 2 is closed');
});
}
Makes all tabs to be re-rendered.
triggers onInit event.
Return value : Promise
Example
instance.refresh().then(({currentData, instance}) => {});
Parameters:
optionName : StringExample
const direction = instance.getOption('direction');
const onSelect = instance.getOption('onSelect');
You can use this method for setting all options except selectedTabID and tabs options.
For re-rendering immediately after this function, you should call refresh method after it.
Return value : instance object
Parameters:
optionName : StringoptionValue : string|boolean|object|functionExample
instance.setOption('direction', 'rtl');
instance.setOption('onSelect', () => {});
instance.setOption('beforeSelect', () => false);
get tabData by id
Return value : tabData object
Parameters:
id : StringExample
const tabData = instance.getTab('3');
console.log(tabData.id); // 3
set tabData by id. for re-rendering immediately after this function, you should call refresh method after it.
Return value : instance
Parameters:
tab id : Stringsource object : containing the properties you want to applyExample
instance.setTab('home', {disable: true});
instance.setTab('contact', {closable: false, panelComponent: (props) => <p>contact panel</p>});
Attach an event handler function for one event.
Return value : instance
Parameters:
event Name : String (can be either of onFirstSelect|onSelect|onClose|onOpen|onInit|onChange|onDestroy)handler : functionExample
const handler = React.useCallback(function (params) {
const {currentSelectedTabId, previousSelectedTabId} = params;
}, []);
instance.on('onSelect', handler);
Attach a handler to an event. The handler is executed at most once.
Return value : instance
Parameters:
event Name : String (can be either of onFirstSelect|onSelect|onClose|onOpen|onInit|onChange|onDestroy)handler : functionExample
instance.one('onSelect', function ({currentSelectedTabId, previousSelectedTabId}) {});
Remove an event handler.
Return value : instance
Parameters:
event Name : String (can be either of onFirstSelect|onSelect|onClose|onOpen|onInit|onChange|onDestroy)handler : function (A handler function previously attached for the event)Example
const handler = React.useCallback(function () {}, []);
const attachHandler = () => {
instance.on('onSelect', handler);
};
const deattachHandler = () => {
instance.off('onSelect', handler);
};
get a copy of data
Return value : Object
Example
const {selectedTabID, openTabIDs} = instance.getData();
NOTE :
get a copy of data in previous render
Return value : Object
Example
const {selectedTabID, openTabIDs} = instance.getPreviousData();
NOTE :
| property name | type | default value | required | description |
|---|---|---|---|---|
| id | string | false | a unique identifier for each tab | |
| title | string | ' ' | false | |
| tooltip | string | ' ' | false | |
| panelComponent | React Element | React Component | null | A function component which returns empty div | false | |
| lazy | boolean | false | false | If set to false the panel will be rendered initially. if set to true the panel will not be rendered until the tab is activated |
| closable | boolean | true | false | |
| iconClass | string | ' ' | false | class name for the icon |
| disable | boolean | false | false |
Example
const tabData = {
id: 'contactID',
title: 'contactTitle',
tooltip: 'contactTooltip',
disable: true,
lazy: true,
iconClass: 'fa fa-home',
closable: false,
panelComponent: (porps) => <p> contact content </p>,
};
const [TabList, PanelList, ready] = useDynTabs({tabs: [tabData]});
// or
if (instance.isOpen(tabData.id) == false) {
instance.open(tabData).then(() => {});
}
Defer loading of tab content until the tab is activated
Example 1
const Panel3 = React.lazy(() => import('./components/panel3.js'));
function LazyLoadingPanel3(porps) {
return (
<Suspense fallback={<div>Loading...</div>}>
<Panel3 {...porps}></Panel3>
</Suspense>
);
}
useDynTabs({
tabs: [
{id: '1', title: 'eager loading tab 1', panelComponent: <p>panel 1</p>},
{id: '2', title: 'eager loading tab 2', lazy: true, panelComponent: <p>panel 2</p>},
{id: '3', title: 'lazy loading tab 3', lazy: true, panelComponent: LazyLoadingPanel3},
],
selectedTabID: '1',
});
NOTE :
Example 2 ( using onFirstSelect event )
useDynTabs({
tabs: [
{id: '1', title: 'eager loading tab 1', panelComponent: <p>panel 1</p>},
{id: '2', title: 'eager loading tab 2', lazy: true, panelComponent: <p>panel 2</p>},
{id: '3', title: 'lazy loading tab 3', lazy: true, panelComponent: <div>Loading...</div>},
],
onFirstSelect: function ({currentSelectedTabId, previousSelectedTabId}) {
const instance = this;
if (currentSelectedTabId === '3') {
import('./components/panel3.js').then((defaultExportedModule) => {
const Panel3 = defaultExportedModule.default;
instance.setTab('3', {panelComponent: Panel3});
instance.refresh();
});
}
},
selectedTabID: '1',
});
react-dyn-tabs does not include any style loading by default. Default stylesheets and themes are provided and can be included in your application if desired.
import 'react-dyn-tabs/style/react-dyn-tabs.min.css';
// or import 'react-dyn-tabs/style/scss/react-dyn-tabs.scss';
import 'react-dyn-tabs/themes/react-dyn-tabs-card.min.css';
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-card.scss';
NOTE :
You can find other themes at themes folder and multiple themes example at example/multi-themes-example folder.
Some actions like open, select, close and refresh cause re-rendering, and using them immediately after calling useDynTabs hook will create an infinite loop and other bugs that most likely you don't want to cause. you should use them inside event listeners or subscriptions.
Do not use setState inside the onInit callback because it leads to an infinite loop.
These deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.
const [TabList, PanelList, ready] = useDynTabs(options);
const open_tab_3 = function () {
ready(function (instance) {
if (instance.isOpen('3') === false) {
instance.open({id: '3', title: 'mock tab 3'});
instance.select('3');
}
});
};
First parameter of onSelect function is an object and has perviousSelectedTabId property which is deprecated. you should use previousSelectedTabId property instead of perviousSelectedTabId property.
First parameter of onChange function is an object and has perviousData property which is deprecated. you should use previousData property instead of perviousData property.
$ npm run test
MIT
v4.6.0
Adding lazy property into tabData object
Provide an example for lazy loading
FAQs
Create responsive and dynamic tabs in React. This library supports ARIA accessibility and provides complete control over tab management using hooks.
The npm package react-dyn-tabs receives a total of 194 weekly downloads. As such, react-dyn-tabs popularity was classified as not popular.
We found that react-dyn-tabs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.