react-dyn-tabs

Create responsive and dynamic tabs in React. This library supports ARIA accessibility and provides complete control over tab management using hooks.

      

Screenshot

!Screenshot

Demo

- Online Demo

Features

- Responsive (using more button)
- Full API (Open & Close & Select & Refresh & setOption & setTab, ...)
- lazy loading and rendering
- Customizable style
- Return to last used tab when closing selected tab
- PanelList can be rendered outside the TabList container
- ARIA accessible
- Customizable Tab component
- Multiple themes
- The core is about 23kb

Table of Contents

- Installation
- Syntax
- Minimal Usage Example
- Simple Manipulation Example
- ready function
- Options
- tabs
- selectedTabID
- direction
- tabComponent
- defaultPanelComponent
- accessibility
- isVertical
- theme
- tablistStyle
- onLoad
- onInit
- onChange
- beforeSelect
- onFirstSelect
- onSelect
- onOpen
- beforeClose
- onClose
- onDestroy
- Instance methods
- isOpen
- open
- isSelected
- select
- close
- refresh
- getOption
- setOption
- getTab
- setTab
- on
- one
- off
- getData
- getPreviousData
- sort
- tabData
- Lazy Loading
- Plugins
- More Button Plugin
- Render custom components at the end of the Tablist
- Themes And Style
- Caveats
- Test
- License

Installation

``js
$ npm install react-dyn-tabs --save
`

or

`js
$ yarn add react-dyn-tabs
`

If you need to directly include script in your html, use the following link :

`js

`

Syntax

`js
[TabList, PanelList, ready] = useDynTabs(initialOptions, plugins);
`

Minimal Usage Example

`js
import React from 'react';
import 'react-dyn-tabs/style/react-dyn-tabs.css'; // Mandatory CSS required by the react-dyn-tabs
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css'; // Optional Theme applied to the react-dyn-tabs
import useDynTabs from 'react-dyn-tabs';

const initialOptions = {
tabs: [
{
id: '1',
title: 'tab 1',
panelComponent: (props) =>

panel 1

,
},
{
id: '2',
title: 'tab 2',
panelComponent: (props) =>

panel 2

,
},
],
selectedTabID: '1',
};

export default () => {
const [TabList, PanelList] = useDynTabs(initialOptions);
return (

);
};
`

Simple Manipulation Example

`js
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';

const initialOptions = {
tabs: [
{
id: '1',
title: 'tab1',
panelComponent: (props) =>

panel 1

,
},
{
id: '2',
title: 'tab2',
panelComponent: (props) =>

panel 2

,
},
],
selectedTabID: '1',
};

export default () => {
const [TabList, PanelList, ready] = useDynTabs(initialOptions);

const addTab3 = function () {
// use ready function to access the instance object
ready((instance) => {
// open tab 3
instance.open({id: '3', title: 'Tab 3', panelComponent: (props) =>

panel 3

}).then(() => {
console.log('tab 3 is open');
});
// switch to tab 3
instance.select('3').then(() => {
console.log('tab 3 is selected');
});
});
};

return (

Add tab 3

);
};
`

ready function

The ready function in the react-dyn-tabs library is part of the array returned by the useDynTabs hook, alongside the TabList and PanelList components. This function allows developers to execute a callback when the TabList and PanelList components are fully mounted, providing access to the instance object for further manipulation.

$3

- Multiple Calls: Developers can invoke the ready function multiple times without any issues.
- Stable Identity: The reference to the ready function remains stable across component re-renders, ensuring consistent behavior.
- Immediate Execution: If the ready function is called after the tabs have already been mounted, the provided callback will be executed immediately.

$3

`js
const [TabList, PanelList, ready] = useDynTabs(initialOptions);

const addTab3 = function () {
ready((instance) => {
// open tab 3
instance.open({id: '3', title: 'Tab 3', panelComponent: (props) =>

panel 3

}).then(() => {
console.log('tab 3 is open');
});
// switch to tab 3
instance.select('3').then(() => {
console.log('tab 3 is selected');
});
});
};
`

Options

$3

type	default value	required	description
Array of tabData	[]	false	initial opened tabs

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
tabs: [
{
id: '1',
title: 'home',
iconClass: 'fa fa-home',
closable: true,
panelComponent: (props) =>

home content

,
},
{
id: '2',
title: 'contact',
tooltip: 'contact',
disable: true,
closable: false,
panelComponent: (props) =>

contact content

,
},
],
});
`

$3

type	default value	required	description
string	' '	false	specifies initial selected tab

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
tabs: [
{
id: '1',
title: 'home',
iconClass: 'fa fa-home',
closable: true,
panelComponent: (props) =>

home content

,
},
{
id: '2',
title: 'contact',
tooltip: 'contact',
disable: true,
closable: false,
panelComponent: (props) =>

contact content

,
},
],
selectedTabID: '2',
});
`

$3

type	default value	required	description
string	'ltr'	false	can be either of 'ltr' or 'rtl'

Example

`js
const [TabList, PanelList, ready] = useDynTabs({direction: 'rtl'});
`

$3

type	required	description
React component	false	custom tab component

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
tabComponent: (props) => {
const {id, isSelected, api: instance} = props;
return (

{props.children}
{props.iconProps && }

);
},
});
`

$3

Default value for panelComponent option.

type	required	description
React component | React element	false

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
defaultPanelComponent: (props) => {
const {id, isSelected, api: instance} = props;
return

loading...

;
},
});
`

$3

type	default value	required	description
boolean	true	false

Example

`js
const [TabList, PanelList, ready] = useDynTabs({accessibility: false});
`

NOTE :

When accessibility option is true, it sets the id attribute of panel and button elements.

$3

type	default value	required	description
boolean	false	false

Example

`js
const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
`

$3

type	required	description
string	no	the chosen theme name when you have multiple themes CSS.

Examples

- in this exmaple, only bootstrap theme is applied to the Tablist, because value of theme option is bootstrap

`js
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
...
useDynTabs({theme:'bootstrap'});
`

- in this exmaple, only classic theme is applied to the Tablist, because value of theme option is classic

`js
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
...
useDynTabs({theme:'classic'});
`

#### Notes

- If the theme option is not provided then all imported themes CSS will be applied to the Tablist.

- If the theme option is set to a empty string then imported themes CSS will not be applied to the Tablist.

- You can create your own theme CSS and set the theme option to your theme class name

$3

type	default value	required	description
object	{}	no	sets the style object for root element of Tablist

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
tablistStyle: {backgroundColor: 'blue'},
});
`

$3

type	required	description
function	false	This event is fired only once, when Tabs are mounted

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
onLoad: function () {
console.log('[onLoad]');
},
});
`

NOTE :

You can use this keyword inside all callback options. It refers to the instance object.

$3

type	required	description
function	false	This event is triggered after every render.

Example

`js
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.

$3

type	required	description
function	false	fires when we open|close|select a tab. this event is not fired initially

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
onChange: function ({currentData, previousData, closedTabIDs, openedTabIDs}) {
console.log('[onChange]');
},
});
`

$3

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 returns false the tab is not selected.

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
beforeSelect: function (e, id) {
console.log('[beforeSelect]');
return true;
},
});
`

$3

type	required	description
function	false	fires after selecting a tab for the first time. It is not fired for the initial selected tab

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
onFirstSelect: function ({currentSelectedTabId, previousSelectedTabId}) {
console.log('[onFirstSelect]');
},
});
`

$3

type	required	description
function	false	fires after selecting a tab. this event is not fired for the initial selected tab

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
onSelect: function ({currentSelectedTabId, previousSelectedTabId}) {
console.log('[onSelect]');
},
});
`

$3

type	required	description
function	false	fires after opening tabs. this event is not fired for initial opened tabs

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
onOpen: function (openedTabIDs) {
console.log('[onOpen]');
},
});
`

$3

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

`js
const [TabList, PanelList, ready] = useDynTabs({
beforeClose: function (e, id) {
console.log('[beforeClose]');
return true;
},
});
`

$3

type	required	description
function	false	fires after closing tabs

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
onClose: function (closedTabIDs) {
console.log('[onClose]');
},
});
`

$3

type	required	description
function	false	fires before destroying useDynTabs hook

Example

`js
const [TabList, PanelList, ready] = useDynTabs({
onDestroy: function () {
console.log('[onDestroy]');
},
});
`

Instance methods

$3

Return value : boolean

Parameters:

- id: String

Example

`js
const result = instance.isOpen('Your tab ID');
`

$3

Triggers onInit, onChange and onOpen events.

It only triggers onInit event, if the tab is already open.

Return value : Promise

Parameters:

- tabData: Object

Example

`js
if (instance.isOpen('contact') == false) {
instance
.open({
id: 'contact',
title: 'contact',
tooltip: 'contact',
disable: false,
closable: true,
iconClass: '',
panelComponent: ,
})
.then(({currentData, instance}) => {
console.log('contact tab is open');
});
}
`

$3

Return value : boolean

Parameters:

- id: String

Example

`js
const result = instance.isSelected('Your tab ID');
`

$3

Makes current and previous selected tab to be re-rendered

Triggers onInit, onChange and onSelect events.

It only triggers onInit event, if the tab is already selected.

Return value : Promise

Parameters:

- id: string

Example

`js
if (instance.isSelected('1') == false) {
instance.select('1').then(({currentData, instance}) => {
console.log('tab 1 is selected');
});
}
`

$3

Triggers onInit, onChange and onClose events.

It only triggers onInit event, if the tab is already closed.

When switching parameter is true, it switches to previous selected tab

Return value : Promise

Parameters:

- id: string
- switching: boolean (default : true)

Example

`js
if (instance.isOpen('2') == true) {
instance.close('2').then(({currentData, instance}) => {
console.log('tab 2 is closed');
});
}
`

$3

Makes all tabs to be re-rendered.

triggers onInit event.

Return value : Promise

Example

`js
instance.refresh().then(({currentData, instance}) => {});
`

$3

Parameters:

- optionName : String

Example

`js
const direction = instance.getOption('direction');
const onSelect = instance.getOption('onSelect');
`

$3

Can be used for setting all options except selectedTabID and tabs options.

This function does not re-render Tabs. If you need to re-render Tabs, use refresh method after this function.

Return value : instance object

Parameters:

- optionName : String
- optionValue : string|boolean|object|function

Example

`js
instance.setOption('direction', 'rtl');
instance.setOption('onSelect', () => {});
instance.setOption('beforeSelect', () => false);
`

$3

Get tabData object

Return value : tabData object

Parameters:

- id : String

Example

`js
const {id, title, tooltip, disable, lazy, iconClass, closable, panelComponent} = instance.getTab('contactID');
console.log(id); //contactID
`

$3

Set tabData object.

This function does not re-render Tabs. If you need to re-render Tabs, use refresh method after this function.

Return value : instance object

Parameters:

- tab id : String
- source object : containing the properties you want to apply

Example

`js
instance.setTab('home', {disable: true});
instance.setTab('contact', {closable: false, panelComponent: (props) =>

contact panel

});
`

$3

Attach an event handler function for one event.

Return value : instance object

Parameters:

- event Name : String (can be either of onFirstSelect|onSelect|onClose|onOpen|onInit|onChange|onDestroy)
- handler : function

Example

`js
const handler = React.useCallback(function (params) {
const {currentSelectedTabId, previousSelectedTabId} = params;
}, []);
instance.on('onSelect', handler);
`

$3

Attach a handler to an event. The handler is executed at most once.

Return value : instance object

Parameters:

- event Name : String (can be either of onFirstSelect|onSelect|onClose|onOpen|onInit|onChange|onDestroy)
- handler : function

Example

`js
instance.one('onSelect', function ({currentSelectedTabId, previousSelectedTabId}) {});
`

$3

Remove an event handler.

Return value : instance object

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

`js
const handler = React.useCallback(function () {}, []);
const attachHandler = () => {
instance.on('onSelect', handler);
};
const deattachHandler = () => {
instance.off('onSelect', handler);
};
`

$3

Get a copy of data

Return value : Data Object

Example

`js
const {selectedTabID, openTabIDs} = instance.getData();
`

NOTE :

- getCopyData function is an older version of getData function and it is enabled by default so that existing users do not have to change their code. You are free to use both conventions.

$3

Get a copy of data in previous render

Return value : Data Object

Example

`js
const {selectedTabID, openTabIDs} = instance.getPreviousData();
`

NOTE :

- getCopyPerviousData function is an older version of getPreviousData function and it is enabled by default so that existing users do not have to change their code. You are free to use both conventions.

$3

Useful for sorting Tabs manually.

Triggers onInit event.

Return value : Promise

Parameters:

- Array of all Tabs IDs

Example

`js
const {openTabIDs} = instance.getData();
instance.sort(openTabIDs.reverse()).then(({currentData, instance}) => {
console.log('sorting Tabs has finished');
});
`

tabData

property name	type	default value	required	description
id	string		false	an 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

`js
const tabData = {
id: 'contactID',
title: 'contactTitle',
tooltip: 'contactTooltip',
disable: true,
lazy: true,
iconClass: 'fa fa-home',
closable: false,
panelComponent: (props) =>

contact content

,
};
const [TabList, PanelList, ready] = useDynTabs({tabs: [tabData]});
// or
if (instance.isOpen(tabData.id) == false) {
instance.open(tabData).then(() => {});
}
`

Lazy Loading

Defer loading of tab content until the tab is activated

Example 1

`js
const Panel3 = React.lazy(() => import('./components/panel3.js'));
function LazyLoadingPanel3(props) {
return (
Loading...