react-tab-list's Introduction

react-tab-list

Installation
Simple usage
Active tab
Styles

Installation

npm i react-tab-list

Simple usage:

import TabList from "react-tab-list";

const items = [
   {
     name: "First"
   },
   {
     name: "Second"
   },
   {
     name: "Third"
   }
];

class SomeComponent extends React.Component{
  constructor(props) {
    super(props);
  {
  callBackFunction(tab) {
    // There will be the active tab data
  }
  render() {
    return <TabList tabs={items} onTab={this.callBackFunction}/>;
  }
}

Active tab

import TabList from "react-tab-list";
class SomeComponent extends React.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 <TabList tabs={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:

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

Recommend Projects