Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dev-javascript/react-dyn-tabs
React Dynamic Tabs, React Responsive Tabs
https://github.com/dev-javascript/react-dyn-tabs
accessibility accessible-tabs dynamic-tabs react react-dyn-tabs react-dynamic-tabs react-hooks react-responsive-tabs react-tab-component react-tabs react-tabs-component responsive tab-management tab-navigation tabs
Last synced: 12 days ago
JSON representation
React Dynamic Tabs, React Responsive Tabs
- Host: GitHub
- URL: https://github.com/dev-javascript/react-dyn-tabs
- Owner: dev-javascript
- License: mit
- Created: 2021-02-24T20:29:19.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-28T13:28:29.000Z (3 months ago)
- Last Synced: 2024-10-12T05:45:31.428Z (27 days ago)
- Topics: accessibility, accessible-tabs, dynamic-tabs, react, react-dyn-tabs, react-dynamic-tabs, react-hooks, react-responsive-tabs, react-tab-component, react-tabs, react-tabs-component, responsive, tab-management, tab-navigation, tabs
- Language: JavaScript
- Homepage: https://dev-javascript.github.io/react-dyn-tabs/
- Size: 5.54 MB
- Stars: 14
- Watchers: 1
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-dyn-tabs
Create responsive and dynamic tabs in React. This library supports ARIA accessibility and provides complete control over tab management using hooks.
[](https://codecov.io/gh/dev-javascript/react-dyn-tabs) [](https://www.npmjs.com/package/react-dyn-tabs) [](http://nodejs.org/download/) [](https://react.dev/) [](LICENSE) [](https://npmjs.org/package/react-dyn-tabs) [](https://travis-ci.org/ly-components/react-dyn-tabs)
## Screenshot
## Demo
- [Online Demo](https://dev-javascript.github.io/react-dyn-tabs/)
## 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](#installation)
- [Syntax](#syntax)
- [Minimal Usage Example](#minimal-usage-example)
- [Simple Manipulation Example](#simple-manipulation-example)
- [ready function](#ready-function)
- [Options](#options)
- [tabs](#tabs)
- [selectedTabID](#selectedtabid)
- [direction](#direction)
- [tabComponent](#tabcomponent)
- [defaultPanelComponent](#defaultpanelcomponent)
- [accessibility](#accessibility)
- [isVertical](#isvertical)
- [theme](#theme)
- [tablistStyle](#tabliststyle)
- [onLoad](#onload)
- [onInit](#oninit)
- [onChange](#onchange)
- [beforeSelect](#beforeselect)
- [onFirstSelect](#onfirstselect)
- [onSelect](#onselect)
- [onOpen](#onopen)
- [beforeClose](#beforeclose)
- [onClose](#onclose)
- [onDestroy](#ondestroy)
- [Instance methods](#instance-methods)
- [isOpen](#isopen)
- [open](#open)
- [isSelected](#isselected)
- [select](#select)
- [close](#close)
- [refresh](#refresh)
- [getOption](#getoption)
- [setOption](#setoption)
- [getTab](#gettab)
- [setTab](#settab)
- [on](#on)
- [one](#one)
- [off](#off)
- [getData](#getdata)
- [getPreviousData](#getpreviousdata)
- [sort](#sort)
- [tabData](#tabdata)
- [Lazy Loading](#lazy-loading)
- [Plugins](#plugins)
- [More Button Plugin](#more-button-plugin)
- [Render custom components at the end of the Tablist](#render-custom-components-at-the-end-of-the-tablist)
- [Themes And Style](#themes-and-style)
- [Caveats](#caveats)
- [Test](#test)
- [License](#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.
### Key Features
- **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.
### Example Usage
```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
### tabs
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
,
},
],
});
```
### selectedTabID
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',
});
```
### direction
type
default value
required
description
string
'ltr'
false
can be either of 'ltr' or 'rtl'
**Example**
```js
const [TabList, PanelList, ready] = useDynTabs({direction: 'rtl'});
```
### tabComponent
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 && }
);
},
});
```
### defaultPanelComponent
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...;
},
});
```
### accessibility
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.
### isVertical
type
default value
required
description
boolean
false
false
**Example**
```js
const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
```
### theme
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
### tablistStyle
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'},
});
```
### onLoad
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.
### onInit
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.
### onChange
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]');
},
});
```
### beforeSelect
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;
},
});
```
### onFirstSelect
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]');
},
});
```
### onSelect
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]');
},
});
```
### onOpen
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]');
},
});
```
### beforeClose
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;
},
});
```
### onClose
type
required
description
function
false
fires after closing tabs
**Example**
```js
const [TabList, PanelList, ready] = useDynTabs({
onClose: function (closedTabIDs) {
console.log('[onClose]');
},
});
```
### onDestroy
type
required
description
function
false
fires before destroying useDynTabs hook
**Example**
```js
const [TabList, PanelList, ready] = useDynTabs({
onDestroy: function () {
console.log('[onDestroy]');
},
});
```
## Instance methods
### isOpen
Return value : `boolean`
Parameters:
- `id: String`
**Example**
```js
const result = instance.isOpen('Your tab ID');
```
### open
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');
});
}
```
### isSelected
Return value : `boolean`
Parameters:
- `id: String`
**Example**
```js
const result = instance.isSelected('Your tab ID');
```
### select
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');
});
}
```
### close
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');
});
}
```
### refresh
Makes all tabs to be re-rendered.
triggers `onInit` event.
Return value : `Promise`
**Example**
```js
instance.refresh().then(({currentData, instance}) => {});
```
### getOption
Parameters:
- `optionName : String`
**Example**
```js
const direction = instance.getOption('direction');
const onSelect = instance.getOption('onSelect');
```
### setOption
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);
```
### getTab
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
```
### setTab
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
});
```
### on
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);
```
### one
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}) {});
```
### off
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);
};
```
### getData
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.
### getPreviousData
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.
### sort
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...}>
);
}
useDynTabs({
tabs: [
{id: '1', title: 'eager loading tab 1', panelComponent:
panel 1
},
{id: '2', title: 'eager loading tab 2', lazy: true, panelComponent: panel 2
},
{id: '3', title: 'lazy loading tab 3', lazy: true, panelComponent: LazyLoadingPanel3},
],
selectedTabID: '1',
});
```
**NOTE :**
- panel 1 is eagerly loaded and rendered.
- panel 2 is eagerly loaded but will not be rendered until tab 2 is activated.
- panel 3 will not be loaded and rendered until tab 3 is activated.
Example 2 ( using onFirstSelect event )
```js
useDynTabs({
tabs: [
{id: '1', title: 'eager loading tab 1', panelComponent:
panel 1
},
{id: '2', title: 'eager loading tab 2', lazy: true, panelComponent: panel 2
},
{id: '3', title: 'lazy loading tab 3', lazy: true},
],
selectedTabID: '1',
defaultPanelComponent: function DefaultPanel() {
return loading...;
},
onFirstSelect: function ({currentSelectedTabId}) {
const instance = this;
if (currentSelectedTabId === '3') {
import('path to/panel3.js').then((defaultExportedModule) => {
const Panel3 = defaultExportedModule.default;
instance.setTab('3', {panelComponent: Panel3});
instance.refresh();
});
}
},
});
```
## Plugins
### More Button Plugin
Make Tabs `responsive`
**Usage**
```js
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';
import MoreButtonPlugin from 'react-dyn-tabs/plugins/moreButtonPlugin';
export default () => {
const [TabList, PanelList, ready] = useDynTabs(initialOptions, [MoreButtonPlugin]);
return (
);
};
```
**Options**
option name
type
description
moreButtonPlugin_buttonComponent
React Function Component
customize root component of more button
moreButtonPlugin_iconComponent
React Function Component
customize icon component of more button
moreButtonPlugin_buttonTooltip
string
**Example**
```js
useDynamicTabs(
{
tabs: [
{id: '1', title: 'tab1', panelComponent: tab content 1},
{id: '2', title: 'tab2', panelComponent: tab content 2},
{id: '3', title: 'tab3', panelComponent: tab content 3},
],
selectedTabID: '1',
moreButtonPlugin_iconComponent: ({instance}) => {
return ;
},
moreButtonPlugin_buttonTooltip: 'show more tabs',
},
[MoreButtonPlugin],
);
```
**unpkg Link**
```js
```
## Render custom components at the end of the Tablist
- render `new tab` button example :
```js
const [TabList, PanelList, ready] = useDynTabs(initialOptions, [MoreButtonPlugin]);
return (
{ ready(instance => instance.open({title:'new tab'})) }}>
NEW
);
};
```
- render `close all` button example :
```js
const [TabList, PanelList, ready] = useDynTabs(initialOptions, [MoreButtonPlugin]);
return (
{ ready(instance=>{ instance.getData().openTabIDs.forEach(id=>instance.close(id,false)); })}}>
CLOSE ALL
);
};
```
## Themes And Style
`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 the Style
```js
import 'react-dyn-tabs/style/react-dyn-tabs.css';
// or import 'react-dyn-tabs/style/react-dyn-tabs.min.css';
// or import 'react-dyn-tabs/style/scss/react-dyn-tabs.scss';
```
For `rtl` mode you should also import following file
```js
import 'react-dyn-tabs/style/react-dyn-tabs-rtl.css';
// or import 'react-dyn-tabs/style/react-dyn-tabs-rtl.min.css';
// or import 'react-dyn-tabs/style/scss/react-dyn-tabs-rtl.scss';
```
### Themes
Themes define how the Tabs looks. The library comes with Provided Themes such as `card` and `bootstrap`. To use a theme you need to 1) import the themes CSS and 2) apply the chosen theme name to the `theme` option of the `react-dyn-tabs`.
- card theme
```js
import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-card.scss';
// or import 'react-dyn-tabs/themes/react-dyn-tabs-card.min.css';
...
useDynTabs({theme:'card'});
```
- bootstrap theme
```js
import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-bootstrap.scss';
// or import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.min.css';
...
useDynTabs({theme:'bootstrap'});
```
- basic theme
```js
import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-basic.scss';
// or import 'react-dyn-tabs/themes/react-dyn-tabs-basic.min.css';
...
useDynTabs({theme:'basic'});
```
- classic theme
```js
import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-classic.scss';
// or import 'react-dyn-tabs/themes/react-dyn-tabs-classic.min.css';
...
useDynTabs({theme:'classic'});
```
## Caveats
- 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.
## Test
```js
$ npm run test
```
## License
MIT