Tab Manager

TabManager

Logic-only tab renderer with imperative API through a ref.

Props

interface TabManagerProps {
    tabs: TabDef[];
    initialKey?: string;
    onTabChange?: (tab: string) => any;
}

interface TabDef {
    key: string;
    render?: (api: { setActive: (key: string, id?: string) => void }) => React.ReactNode;
}

Ref API

interface TabManagerHandle {
    setActiveTab: (key: string, id?: string) => void;
    getActiveTab: () => string;
}

Helper:

goToTab(ref, "settings");

Usage

const ref = useRef<TabManagerHandle>(null);

<TabManager
    ref={ref}
    tabs={tabs}
    initialKey="overview"
    onTabChange={(key) => console.log(key)}
/>;