React-tabs-adaptive NPM

react-tabs-adaptive

A simple customizable react tabs component with adaptive design

npm

Installation

npm install react-tabs-adaptive --save

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>
    );
  }
}