react-twitter-tabs

A cross-platform Tab View component for ReactJs

Features

• Very lightweight
• High Responsive
• Highly customizable

Demo

Live Demo

Lets Try The Component with codesandbox

Installation

npm install react-twitter-tabs --save

Quick Start

<Tabs>
  <Tab label={"One"}>{"One Content"}</Tab>

  <Tab label={"Two"}>{"Two Content"}</Tab>

  <Tab label={"Three"}>{"Three Content"}</Tab>

  <Tab label={"Four"}>{"Four Content"}</Tab>

  <Tab label={"Five"}>{"five Content"}</Tab>

  <Tab label={"Six"}>{"Six Content"}</Tab>

  <Tab label={"Seven"}>{"seven Content"}</Tab>

  <Tab label={"Eight"}>{"eight Content"}</Tab>

  <Tab label={"Nine"}>{"nine Content"}</Tab>

  <Tab label={"Ten"}>{"ten Content"}</Tab>

  <Tab label={"Eleven"}>{"eleven Content"}</Tab>
</Tabs>

Props

2-Tabs

| Prop name | Description | isRequired | type | | -------------------- | ------------------------------------------- | ---------- | ------ | | activeColor | The Colour of Active indicator | No | String | | hoveredColor | The Background Colour of Tab When Hover | No | String | | textColor | The Colour of Tab Label Text | No | String | | tabBackgroundColor | The Background Colour of Tab | No | String | | arrowColor | The Colour Next & Previous Arrow | No | String | | arrowBackGroundColor | The Background Colour Next & Previous Arrow | No | String |

2-Tab

| Prop name | Description | isRequired | type | | ------------- | ---------------------------- | ---------- | ------- | | label | The Label Of the tab | Yes | String | | isTabDisabled | Specify that tab is disabled | No | Boolean |

Thank you

Make A Review