Tabs

Imports

import { TabsService } from '@codella-software/utils'
import {
  TabsProvider,
  useActiveTab,
  useSetActiveTab,
  useTabChange,
  useTabs,
  useTabsService,
} from '@codella-software/react'

Core service

const tabsService = new TabsService({
  tabs: [
    { id: 'overview', label: 'Overview' },
    { id: 'details', label: 'Details', badge: 2 },
    { id: 'settings', label: 'Settings', disabled: true },
  ],
  defaultTabId: 'overview',
  enableUrlRouting: true,
  urlParam: 'tab',
})

tabsService.setActiveTab('details')
tabsService.setTabBadge('details', 3)
tabsService.setTabDisabled('settings', false)

Public methods:

• setActiveTab(tabId)
• setActiveTabByIndex(index)
• getActiveTabId()
• getActiveTab()
• getActiveTabIndex()
• getTabs()
• getActiveTabId$()
• getActiveTab$()
• onTabChange$()
• getTabs$()
• updateTabs(tabs)
• addTab(tab, index?)
• removeTab(tabId)
• setTabDisabled(tabId, disabled)
• setTabBadge(tabId, badge)
• nextTab()
• previousTab()
• destroy()

React provider

function App() {
  return (
    <TabsProvider
      config={{
        tabs: [
          { id: 'overview', label: 'Overview' },
          { id: 'details', label: 'Details' },
        ],
        defaultTabId: 'overview',
      }}
    >
      <TabsView />
    </TabsProvider>
  )
}

function TabsView() {
  const tabs = useTabs()
  const activeTab = useActiveTab()
  const { setActiveTab, nextTab, previousTab } = useSetActiveTab()

  return (
    <>
      <nav>
        {tabs.map((tab) => (
          <button
            key={tab.id}
            disabled={tab.disabled}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </nav>
      <p>Active: {activeTab?.label}</p>
      <button onClick={previousTab}>Previous</button>
      <button onClick={nextTab}>Next</button>
    </>
  )
}

There is no exported ResponsiveTabs component in the current React package; build your own UI with the provider and hooks above.