react-studio-tabs

A minimalistic react tab component that displays content in tabs. Some default stylings are included in the below link

Links

• npm
• github
• Tutorial
• Simple style.css

Tabs Props

|Name|Type|Descriptions| |-----|------|---| |bemClassName?|string|Main bem class name| |className?|string|Main element class name| |ulClassName?|string|The class name of the ul list| |liClassName?|string|The class name of the list element| |contentClassName?|string|the class name of the tab content| |initialTab?|number|Initial tab to be shown| |onInitialTabChange?|currentIdx:number)=>void|Function that is being triggered when the initialTab is changed| |afterTabChange?|(currentIdx:number, prevIdx:number)=>void|Function that is being triggered after the index is changed| |onTabClicked?|(idx?:number, prevIdx?:number)=>void|Function that is being triggered when the tab indexed is being changed| |isSeoFriendly?|boolean|If set to true the display of the current tab will be based on css styles instead of render options|

Tabs Default Props

|Name|Value| |----|-----| |onTabClicked|()=>{}| |onInitialTabChange|()=>{}| |afterTabChange|()=>{}| |ulClassName|""| |className|""| |bemClassName|"tabs"| |contentClassName|""| |liClassName|""| |isSeoFriendly|false|

Tab Props

|Name|Type|Descriptions| |-----|------|---| className?|string|Tab panel class name| title|string | React.ReactNode|The title name of the tab button|

Tab Default Props

|Name|Value| |----|-----| |className|""|

Installation

$ npm install --save react-studio-tabs

Usage

import {Tabs, Tab} from "react-studio-tabs";

Simple Example

<Tabs>
    <Tab title="one">One</Tab>
    <Tab title="two">Two</Tab>
    <Tab title="three">Three</Tab>
    <Tab title="four">Four</Tab>
</Tabs>