ts-multitab

Package to render multiple tabs

Installation

$3

ts-multitab is available as an npm package.

npm:

``sh
npm i ts-multitab
`

yarn:

`sh
yarn add ts-multitab
`

Getting started with ts multitab

$3

`jsx
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: ,
},

{
title: "Bookmarked",

index: 1,

component: ,
},
];

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

return (
<>
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.