# ndla-tabs

> React Tabs component for NDLA

Latest version **0.8.0** (published 2018-10-17) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install ndla-tabs
pnpm add ndla-tabs
yarn add ndla-tabs
bun add ndla-tabs
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2018-10-17 |
| First published | 2016-12-09 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 90.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | ndla@knowit.no |
| Maintainers | chrpeter, kodevil, ndla, oyvinmar, sebastianjg |
| Keywords | ndla |

## Links

- npm: https://www.npmjs.com/package/ndla-tabs
- Repository: https://github.com/NDLANO/frontend-packages.git/ndla-ui/
- npm.io page: https://npm.io/package/ndla-tabs

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11

## Recent versions

- 0.8.0 (latest) — 2018-10-17
- 0.3.3-2 (next) — 2017-07-13
- 0.7.1 — 2018-10-03
- 0.7.0 — 2018-09-25
- 0.6.4 — 2018-09-13
- 0.6.3 — 2018-09-11
- 0.6.2 — 2018-08-29
- 0.6.1 — 2018-08-21
- 0.6.0 — 2018-07-26
- 0.5.0 — 2018-07-09
- 0.4.5 — 2018-07-05
- 0.4.4 — 2018-05-31
- 0.4.3 — 2018-02-26
- 0.4.2 — 2017-12-18
- 0.4.1 — 2017-10-11
- … 13 more at https://npm.io/package/ndla-tabs/versions

## README

# ndla-tabs

A simple tabs component. Mainly a wrapper for [react-tabs](https://github.com/reactjs/react-tabs).

## Installation

```sh
$ yarn add --save ndla-tabs
```

```sh
$ npm install ndla-tabs --save
```

## Usage

### Styling

```scss
/* Your project's main .scss import file */
@import '~ndla-tabs/scss/tabs'; // with webpack and sass-loader
@import '../path/to/node_modules/ndla-tabs/scss/tabs'; // direct reference
```

### Basic example

```js
import Tabs from 'ndla-tabs';
import BananaComponent from 'banana';
import PickleComponent from 'picke';

const Fruits = () => {
  const fruitTabs = [
    { title: 'Apple', content: <p>An apple a day keeps the doctor away</p> },
    { title: 'Orange', content: () => <h1>Orange is the new black</h1> },
    { title: 'Banana', content: <BananaComponent /> },
    { title: 'Pickle', content: <PickleComponent />, disabled: true }, // No vegetables allowed!
  ];
  return <Tabs tabs={fruitTabs} />;
};
```

### Example where selected tab is controlled via `selectedIndex` prop

```js
import Tabs from 'ndla-tabs';
import fruitTabs from 'fruit-tabs';

class FruitTabSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
    };
  }

  render() {
    const { index } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ index: 1 })}>
          Show banana tab
        </button>
        <Tabs selectedIndex={index} tabs={fruitTabs} />
      </div>
    );
  }
}
```

## PropTypes

| Props               |  Type  | Required | Description                                                                                                                                    |
| ------------------- | :----: | :------: | :--------------------------------------------------------------------------------------------------------------------------------------------- |
| tabs                | array  |    \*    | An array of tabs represented as objects. An tab object requires the following properties: `title`, `content`. Property `disabled` is optional. |
| onSelect            |  func  |          | Is called when a tab is selected. Current index and last index will be passed as parameters.                                                   |
| selectedIndex       | object |          | Is the tab to select when rendered. Used when you want to control which tab is rendered from the a parent component.                           |
| forceRenderTabPanel |  bool  |          | Is `false` by default. Set to `true` to render all tab's content instead of only selected tab content.                                         |
| modifier            | string |          | An BEM modifier which is added to all html classes.                                                                                            |

### Server side rendering

resetIdCounter should be called on server before render to prevent server and client markup diff. Example:

```js
  import { resetIdCounter } from 'ndla-tabs';
  resetIdCounter();
  ReactDOMServer.renderToString(...);
```

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