rtabs

A simple and minimal tab component for react.

Live Demo / NPM Page

Quickstart

To start using rtabs

1. Install

npm install rtabs
yarn add rtabs

2. Import necessary components from rtabs

import { Tabs, Tab, TabTitle, TabContent } from "rtabs";

3. Add Tab components inside Tabs

import React from "react";
import { Tabs, Tab, TabTitle, TabContent } from "rtabs";

function ReactTabs() {
  return (
    <div>
      <Tabs>
        <Tab>
          <TabTitle>Tab Title 01</TabTitle>
          <TabContent>Tab Content 01</TabContent>
        </Tab>
        <Tab>
          <TabTitle>Tab Title 02</TabTitle>
          <TabContent>Tab Content 02</TabContent>
        </Tab>
        <Tab>
          <TabTitle>Tab Title 03</TabTitle>
          <TabContent>Tab Content 03</TabContent>
        </Tab>
        <Tab>
          <TabTitle>Tab Title 04</TabTitle>
          <TabContent>Tab Content 04</TabContent>
        </Tab>
      </Tabs>
    </div>
  );
}

export default ReactTabs;

Configurations

A configuratio object can be passed to <Tabs/> component.

<Tabs config={{}}>
  <Tab>
    <TabTitle>Tab Title 01</TabTitle>
    <TabContent>Tab Content 01</TabContent>
  </Tab>
</Tabs>

Properties

Property	Description	Type	Accepted Values	Default
layout	Layout of tabs	String	horizontal,vertical	horizontal
alignTitles	Alignment of Tab Titles	String	left,middle,right	left
activeColor	Active tab underline color	String	black , #eee (Any hex/rgb or rgba value)	black