# react-tabs-adaptive

> A simple customizable react tabs component with adaptive design

Latest version **0.1.7** (published 2019-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-tabs-adaptive
pnpm add react-tabs-adaptive
yarn add react-tabs-adaptive
bun add react-tabs-adaptive
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2019-05-04 |
| First published | 2019-04-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 22 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nikita Slobozhaninov |
| Maintainers | nikita-slb |
| Keywords | react, tabs, react-component |

## Links

- npm: https://www.npmjs.com/package/react-tabs-adaptive
- Repository: git@github.com:nikita-slb/react-tabs-adaptive
- Homepage: https://github.com/nikita-slb/react-tabs-adaptive
- npm.io page: https://npm.io/package/react-tabs-adaptive

## Dependencies (3)

- [node-sass](https://npm.io/package/node-sass.md) ^4.11.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-custom-scrollbars](https://npm.io/package/react-custom-scrollbars.md) ^4.2.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.7 (latest) — 2019-05-04
- 0.1.6 — 2019-05-01
- 0.1.5 — 2019-04-28
- 0.1.4 — 2019-04-28
- 0.1.3 — 2019-04-28
- 0.1.2 — 2019-04-27
- 0.1.1 — 2019-04-27

## README

# react-tabs-adaptive 

A simple customizable react tabs component with adaptive design

![npm](https://img.shields.io/npm/v/react-tabs-adaptive.svg?color=blue) [![Build Status](https://travis-ci.com/nikita-slb/react-tabs-adaptive.svg?branch=master)](https://travis-ci.com/nikita-slb/react-tabs-adaptive) [![JavaScript Style Guide: Good Parts](https://img.shields.io/badge/code%20style-goodparts-brightgreen.svg?style=flat)](https://github.com/dwyl/goodparts "JavaScript The Good Parts") [![codecov](https://codecov.io/gh/nikita-slb/react-tabs-adaptive/branch/master/graph/badge.svg)](https://codecov.io/gh/nikita-slb/react-tabs-adaptive)


# Installation

```sh
npm install react-tabs-adaptive --save
```

or

```sh
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

```js
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

```js
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

---
_Source: https://npm.io/package/react-tabs-adaptive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._