Typescript React Tabs

Simplistic way to add tabs

ex:

with strict type checking:

Create a union type of your internal attributes:

type Frames = 'home' | 'form' | 'help'

Set up tabs with attributes:

import {Tabs} from 'ts-jsx-tabs'

let tabs: Tabs<Frames> = [
    {
        Title: "Home",
        attribute: "home"
    },
    {
        Title: "Contact Us",
        attribute: "form"
    },
    {
        Title: "FAQ",
        attribute: "help"
    },
]

Now within your component:

import TabGroup from 'ts-jsx-tabs';

const App = () => {
    const [frame, setFrame] = useState<Frames>(home);

    return (
        <>
            <TabGroup<Frames>
                tabs={tabs}
                currentTab={frame}
                setCurrentTab={setFrame}
            />

            {frame === 'home' &&
            <Home/>
            }
            {frame === 'form' &&
            <ContactUs/>
            }
            {frame === 'help' &&
            <FAQpage/>
            }
        </>
    )
}

Without strict typing:

The internals are built to use the string of the title as the tab keys also. Within your component:

import TabGroup from 'ts-jsx-tabs';

const App = () => {
    const [frame, setFrame] = useState<string>('Home');

    return (
        <>
            <TabGroup
                tabs={
                    [
                        {Title: "Home"},
                        {Title: "Contact Us"},
                        {Title: "FAQ"}
                    ]
                }
                currentTab={frame}
                setCurrentTab={setFrame}
            />

            {frame === 'Home' &&
            <Home/>
            }
            {frame === 'Contact Us' &&
            <ContactUs/>
            }
            {frame === 'FAQ' &&
            <FAQpage/>
            }
        </>
    )
}

Custom render the tab:

Utilizing Tab.RenderTitle you can fill custom render the Title:

const tabs = [
      {
          Title: "Home",
          RenderTitle: <>Home <img src={"homeIcon"}/></>
      },
  ]

Styling Functionality

Style and Prop overrides are baked into each layer using:

• PropsAndStyle datatype:

whereToApply = {
    style: {
        anyCssStyle:"ToBeOverridden"
    },
    props: {
        anyHtmlProps:"toBeOverridden"
    }
}

Used with

• Tab.button for individual tab.
• TabsCoreProps.container for the banner containing all tabs.

Other components by me:

• ts-jsx-table

Special Thanks

• For referencing how to make a library: https://www.tsmean.com/articles/how-to-write-a-typescript-library/
• Getting CSS to work with tsc: https://github.com/swimauger/tsc-hooks
• mom