react-tabs-adaptive

A simple customizable react tabs component with adaptive design

Installation

npm install react-tabs-adaptive --save

or

yarn add react-tabs-adaptive

Live Playground

To run that demo on your own computer:

• Clone this repository
• yarn install
• yarn start
• Visit http://localhost:3000/

Usage

Uncontrolled mode example

import { Tabs, Tab } from "react-tabs-adaptive";
import MyComponent from "./MyComponent";

<Tabs>
  <Tab tabName="Tab 1">
    <p>
      Lorem ipsum ...
    </p>
  </Tab>
  <Tab tabName="Tab 2" counter={4}>
    <MyComponent/>
  </Tab>
</Tabs>

Controlled mode example

import { Tabs, Tab } from "react-tabs-adaptive";
import MyComponent from "./MyComponent";
        
class App extends React.Component {

  constructor (props) {
    super(props);

    this.state = { activeTabIndex: 0 };
  }

  render () {
    const { activeTabIndex } = this.state;

    return (
      <div className="App">
        <Tabs activeTabIndex={activeTabIndex}
              selectTab={(selectedTabIndex) =>
                this.setState({ activeTabIndex: selectedTabIndex })
              }>
          <Tab tabName="Tab 1">
            <p>
              Lorem ipsum ...
            </p>
          </Tab>
          <Tab tabName="Tab 2" counter={4}>
            <MyComponent/>
          </Tab>
        </Tabs>
      </div>
    );
  }
}

Available Props

Tabs

Name | Type | Default | Required | Description --- | --- | ---: | ---: | --- activeTabIndex | number | 0 | - | Current active tab index. selectTab | function | | - | Select tab handler. Function return index value selected tab.

Tab

Name | Type | Default | Required | Description --- | --- | ---: | ---: | --- tabName | string | | + | Name of tab. counter | number | 0 | - | Badge. Example: Counter new messages.

License

MIT