ts-multitab

Package to render multiple tabs

Installation

ts-multitab

ts-multitab is available as an npm package.

npm:

npm i ts-multitab

yarn:

yarn add ts-multitab

Getting started with ts multitab

Example

import React, { useState } from "react";
import TsfMultiTab from "ts-multitab/dist/TsfMultiTab";
import FavoriteIcon from "@mui/icons-material/Favorite";
import Invited from "./Invited";
import Bookmarked from "./Bookmarked";

function App() {
  const [activeTab, setActiveTab] = React.useState(0);

  const myTabs = [
    {
      title: "Invited",

      index: 0,

      component: <Invited />,
    },

    {
      title: "Bookmarked",

      index: 1,

      component: <Bookmarked />,
    },
  ];

  const tabStyles = {
    activeTabColor: "white",
    tabsBackgroundColor: "blue",
    activeTabTextColor: "blue",
    unActiveTabTextColor: "white",
    scrollButtonColor: "white",
    tabIndicatorColor: "white",
  };

  return (
    <>
      <TsfMultiTab
        tabs={myTabs}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        tabStyles={tabStyles}
      />
    </>
  );
}

export default App;

tabs must be a list of Object in a array with index (Unique Id for optimum rendering), title (Title to be displayed for Tab), component (Component that should be mapped to the Tab).

tabStyles must be a list of Object with activeTabColor (Color code or color name) tabsBackgroundColor (Color code or color name) activeTabTextColor (Color code or color name) unActiveTabTextColor (Color code or color name) scrollButtonColor (Color code or color name) tabIndicatorColor (Color code or color name)

activeTab & setActiveTab is the react state which holds the default tab number, which also allows you to update the tab number whenever requried.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.