react-tab-list

• Installation
• Simple usage
• Active tab
• Styles

Installation

npm i react-tab-list

Simple usage:

importTabListfrom"react-tab-list";constitems=[{name: "First"},{name: "Second"},{name: "Third"}];classSomeComponentextendsReact.Component{constructor(props){super(props);{callBackFunction(tab){// There will be the active tab data}render(){return<TabListtabs={items}onTab={this.callBackFunction}/>;}}

Active tab

importTabListfrom"react-tab-list";classSomeComponentextendsReact.Component{constructor(props){super(props);this.state={items: [{name: "First",id: "a1"},{name: "Second",id: "b2"},{name: "Third",id: "e5"}],activeTabId: "b2"}this.callBackFunction=this.callBackFunction.bind(this);{callBackFunction(tab){this.setState({activeTabId: tab.id});}render(){return<TabListtabs={this.state.items}activeTab={{id: this.state.activeTabId}}onTab={this.callBackFunction}/>;}}

Of course, you have the possibility not point an active tab(activeTab). In this case, the first item of tabs is assigned by default.

Styles:

You can include less, scss or css file in your project.

@import"./react-tab-list/styles/tab-list.less";

@import"./react-tab-list/styles/tab-list.scss";

and/or add some custome style:

<TabListtabs={[{name: "Item 1",className: "my-css-class"},{name: "Item 2",className: "my-css-class"}]}/>;