panel 1
,\r\n },\r\n {\r\n id: '2',\r\n title: 'tab 2',\r\n panelComponent: (props) =>panel 2
,\r\n },\r\n ],\r\n selectedTabID: '1',\r\n};\r\n\r\nexport default () => {\r\n const [TabList, PanelList] = useDynTabs(initialOptions);\r\n return (\r\npanel 1
,\r\n },\r\n {\r\n id: '2',\r\n title: 'tab2',\r\n panelComponent: (props) =>panel 2
,\r\n },\r\n ],\r\n selectedTabID: '1',\r\n};\r\n\r\nexport default () => {\r\n const [TabList, PanelList, ready] = useDynTabs(initialOptions);\r\n\r\n const addTab3 = function () {\r\n // use ready function to access the instance object\r\n ready((instance) => {\r\n // open tab 3\r\n instance.open({id: '3', title: 'Tab 3', panelComponent: (props) =>panel 3
}).then(() => {\r\n console.log('tab 3 is open');\r\n });\r\n // switch to tab 3\r\n instance.select('3').then(() => {\r\n console.log('tab 3 is selected');\r\n });\r\n });\r\n };\r\n\r\n return (\r\npanel 3
}).then(() => {\r\n console.log('tab 3 is open');\r\n });\r\n // switch to tab 3\r\n instance.select('3').then(() => {\r\n console.log('tab 3 is selected');\r\n });\r\n });\r\n};\r\n```\r\n\r\n## Options\r\n\r\n### tabs\r\n\r\n| type | \r\ndefault value | \r\nrequired | \r\ndescription | \r\n
|---|---|---|---|
| \r\n Array of tabData \r\n | \r\n [] | \r\n false | \r\ninitial opened tabs | \r\n
home content
,\r\n },\r\n {\r\n id: '2',\r\n title: 'contact',\r\n tooltip: 'contact',\r\n disable: true,\r\n closable: false,\r\n panelComponent: (props) =>contact content
,\r\n },\r\n ],\r\n});\r\n```\r\n\r\n### selectedTabID\r\n\r\n| type | \r\ndefault value | \r\nrequired | \r\ndescription | \r\n
|---|---|---|---|
| string | \r\n' ' | \r\nfalse | \r\nspecifies initial selected tab | \r\n
home content
,\r\n },\r\n {\r\n id: '2',\r\n title: 'contact',\r\n tooltip: 'contact',\r\n disable: true,\r\n closable: false,\r\n panelComponent: (props) =>contact content
,\r\n },\r\n ],\r\n selectedTabID: '2',\r\n});\r\n```\r\n\r\n### direction\r\n\r\n| type | \r\ndefault value | \r\nrequired | \r\ndescription | \r\n
|---|---|---|---|
| string | \r\n'ltr' | \r\nfalse | \r\ncan be either of 'ltr' or 'rtl' | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| React component | \r\nfalse | \r\ncustom tab component | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| React component | React element | \r\nfalse | \r\n\r\n |
| type | \r\ndefault value | \r\nrequired | \r\ndescription | \r\n
|---|---|---|---|
| boolean | \r\ntrue | \r\nfalse | \r\n\r\n |
| type | \r\ndefault value | \r\nrequired | \r\ndescription | \r\n
|---|---|---|---|
| boolean | \r\nfalse | \r\nfalse | \r\n\r\n |
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| string | \r\nno | \r\nthe chosen theme name when you have multiple themes CSS. | \r\n
| type | \r\ndefault value | \r\nrequired | \r\ndescription | \r\n
|---|---|---|---|
| object | \r\n{} | \r\nno | \r\nsets the style object for root element of Tablist | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\nThis event is fired only once, when Tabs are mounted | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\nThis event is triggered after every render. | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\nfires when we open|close|select a tab. this event is not fired initially | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\n\r\n Fires when the user clicks on the tab, but before select them. \r\n This event should return boolean true or false, If the event returns false the tab is not selected.\r\n | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\nfires after selecting a tab for the first time. It is not fired for the initial selected tab | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\nfires after selecting a tab. this event is not fired for the initial selected tab | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\nfires after opening tabs. this event is not fired for initial opened tabs | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\n\r\n fires when the user clicks on the close icon, but before close them. \r\n This event should return boolean true or false, If the event return false the tab is not closed.\r\n | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\nfires after closing tabs | \r\n
| type | \r\nrequired | \r\ndescription | \r\n
|---|---|---|
| function | \r\nfalse | \r\nfires before destroying useDynTabs hook | \r\n
contact panel
});\r\n```\r\n\r\n### on\r\n\r\nAttach an event handler function for one event.\r\n\r\nReturn value : `instance object`\r\n\r\nParameters:\r\n\r\n- `event Name : String (can be either of onFirstSelect|onSelect|onClose|onOpen|onInit|onChange|onDestroy)`\r\n- `handler : function`\r\n\r\n**Example**\r\n\r\n```js\r\nconst handler = React.useCallback(function (params) {\r\n const {currentSelectedTabId, previousSelectedTabId} = params;\r\n}, []);\r\ninstance.on('onSelect', handler);\r\n```\r\n\r\n### one\r\n\r\nAttach a handler to an event. The handler is executed at most once.\r\n\r\nReturn value : `instance object`\r\n\r\nParameters:\r\n\r\n- `event Name : String (can be either of onFirstSelect|onSelect|onClose|onOpen|onInit|onChange|onDestroy)`\r\n- `handler : function`\r\n\r\n**Example**\r\n\r\n```js\r\ninstance.one('onSelect', function ({currentSelectedTabId, previousSelectedTabId}) {});\r\n```\r\n\r\n### off\r\n\r\nRemove an event handler.\r\n\r\nReturn value : `instance object`\r\n\r\nParameters:\r\n\r\n- `event Name : String (can be either of onFirstSelect|onSelect|onClose|onOpen|onInit|onChange|onDestroy)`\r\n- `handler : function (A handler function previously attached for the event)`\r\n\r\n**Example**\r\n\r\n```js\r\nconst handler = React.useCallback(function () {}, []);\r\nconst attachHandler = () => {\r\n instance.on('onSelect', handler);\r\n};\r\nconst deattachHandler = () => {\r\n instance.off('onSelect', handler);\r\n};\r\n```\r\n\r\n### getData\r\n\r\nGet a copy of data\r\n\r\nReturn value : `Data` Object\r\n\r\n**Example**\r\n\r\n```js\r\nconst {selectedTabID, openTabIDs} = instance.getData();\r\n```\r\n\r\n**NOTE :**\r\n\r\n- `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.\r\n\r\n### getPreviousData\r\n\r\nGet a copy of data in previous render\r\n\r\nReturn value : `Data` Object\r\n\r\n**Example**\r\n\r\n```js\r\nconst {selectedTabID, openTabIDs} = instance.getPreviousData();\r\n```\r\n\r\n**NOTE :**\r\n\r\n- `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.\r\n\r\n### sort\r\n\r\nUseful for sorting Tabs manually.\r\n\r\nTriggers `onInit` event.\r\n\r\nReturn value : `Promise`\r\n\r\nParameters:\r\n\r\n- `Array of all Tabs IDs`\r\n\r\n**Example**\r\n\r\n```js\r\nconst {openTabIDs} = instance.getData();\r\ninstance.sort(openTabIDs.reverse()).then(({currentData, instance}) => {\r\n console.log('sorting Tabs has finished');\r\n});\r\n```\r\n\r\n## tabData\r\n\r\n| property name | \r\ntype | \r\ndefault value | \r\nrequired | \r\ndescription | \r\n
|---|---|---|---|---|
| id | \r\nstring | \r\n\r\n | false | \r\nan unique identifier for each tab | \r\n
| title | \r\nstring | \r\n' ' | \r\nfalse | \r\n\r\n |
| tooltip | \r\nstring | \r\n' ' | \r\nfalse | \r\n\r\n |
| panelComponent | \r\nReact Element | React Component | null | \r\nA function component which returns empty div | \r\nfalse | \r\n\r\n |
| lazy | \r\nboolean | \r\nfalse | \r\nfalse | \r\n\r\n If set to false the panel will be rendered initially.\r\n if set to true the panel will not be rendered until the tab is activated\r\n | \r\n
| closable | \r\nboolean | \r\ntrue | \r\nfalse | \r\n\r\n |
| iconClass | \r\nstring | \r\n' ' | \r\nfalse | \r\nclass name for the icon | \r\n
| disable | \r\nboolean | \r\nfalse | \r\nfalse | \r\n\r\n |
contact content
,\r\n};\r\nconst [TabList, PanelList, ready] = useDynTabs({tabs: [tabData]});\r\n// or\r\nif (instance.isOpen(tabData.id) == false) {\r\n instance.open(tabData).then(() => {});\r\n}\r\n```\r\n\r\n## Lazy Loading\r\n\r\nDefer loading of tab content until the tab is activated\r\n\r\nExample 1\r\n\r\n```js\r\nconst Panel3 = React.lazy(() => import('./components/panel3.js'));\r\nfunction LazyLoadingPanel3(props) {\r\n return (\r\npanel 1
},\r\n {id: '2', title: 'eager loading tab 2', lazy: true, panelComponent:panel 2
},\r\n {id: '3', title: 'lazy loading tab 3', lazy: true, panelComponent: LazyLoadingPanel3},\r\n ],\r\n selectedTabID: '1',\r\n});\r\n```\r\n\r\n**NOTE :**\r\n\r\n- panel 1 is eagerly loaded and rendered.\r\n- panel 2 is eagerly loaded but will not be rendered until tab 2 is activated.\r\n- panel 3 will not be loaded and rendered until tab 3 is activated.\r\n\r\nExample 2 ( using onFirstSelect event )\r\n\r\n```js\r\nuseDynTabs({\r\n tabs: [\r\n {id: '1', title: 'eager loading tab 1', panelComponent:panel 1
},\r\n {id: '2', title: 'eager loading tab 2', lazy: true, panelComponent:panel 2
},\r\n {id: '3', title: 'lazy loading tab 3', lazy: true},\r\n ],\r\n selectedTabID: '1',\r\n defaultPanelComponent: function DefaultPanel() {\r\n return| option name | \r\ntype | \r\ndescription | \r\n
|---|---|---|
| moreButtonPlugin_buttonComponent | \r\nReact Function Component | \r\ncustomize root component of more button | \r\n
| moreButtonPlugin_iconComponent | \r\nReact Function Component | \r\ncustomize icon component of more button | \r\n
| moreButtonPlugin_buttonTooltip | \r\nstring | \r\n\r\n |