# react-rtab

> React component for Repeatedly, Rendering Tabs

Latest version **0.2.3** (published 2016-02-24) · 0 weekly downloads

## Install

```sh
npm install react-rtab
pnpm add react-rtab
yarn add react-rtab
bun add react-rtab
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2016-02-24 |
| First published | 2016-02-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | YG |
| Maintainers | fourwingsy |
| Keywords | react-tabs, react-tab, react, tabs, tab, panel |

## Links

- npm: https://www.npmjs.com/package/react-rtab
- Repository: https://github.com/FourwingsY/react-rtab
- Homepage: https://github.com/FourwingsY/react-rtab#readme
- Issues: https://github.com/FourwingsY/react-rtab/issues
- npm.io page: https://npm.io/package/react-rtab

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^0.14.7
- [classnames](https://npm.io/package/classnames.md) ^2.2.3

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.2.3 (latest) — 2016-02-24
- 0.2.2 — 2016-02-24
- 0.2.1 — 2016-02-24
- 0.2.0 — 2016-02-23
- 0.1.1 — 2016-02-20
- 0.1.0 — 2016-02-18

## README

# react-rtab
React tab-panel component.

### installation
`npm install --save react-rtab`

### Examples
see [fourwingsy.github.io/react-rtab](http://fourwingsy.github.io/react-rtab)

### Description
React-rtab use Models to rendering tab component.

the `R` in 'R'tab stands for `R`epeatedly, `R`endered models.

Models should be an array of Model `{tab: TabModel, panel: PanelModel}`

TabModel could be an `object with renderer`, or `plain text`.
PanelModel could be an `object with renderer`, `Getter Function` or `ReactElement` (this is syntactic sugar for static panel document).

### Parameters and Models
| Props | Type | Default value | Description |
| ----- | ---- | ------------- | ----------- |
| models | arrayOf(Model) | - | REQUIRED, contains data of tabs |
| `Model` | shapeOf({<br>&nbsp;&nbsp;tab: TabModel, <br>&nbsp;&nbsp;panel: PanelModel}) | - | Data Model for rendering a tab and panel |
| `TabModel` | Object or string | - |  |
| tabRenderer | (TabModel) => ReactElement | `(tabModel) => <span>{tabModel}</span>` | REQUIRED WHEN TabModel is an Object. If TabModel is string, tabRenderer will be it's default. |
| `PanelModel` | Object, Getter function, or ReactElement  |  |  |
| panelRenderer | (PanelModel) => ReactElement | `undefined` | REQUIRED unless PanelModel is ReactElement. |
| tabPosition | string | "top" | Where to render tabs. `"left"` will render vertical tabs. `"right"` or `"bottom"` is not implemented yet. |
| activeTabIndex | number | 0 | Select initial active tab by index of models |
| preserve | bool | false | if preserve is false, then only one active panel will be rendered. if preserve is true, `<Rtab>` will mount all panels, non-active panels will be just hidden. if each panel has a dynamic component like `<input>`, set preserve `true` to preserve input value. |
| draggable | bool | false | Add drag-event listeners on Tab |
| closable | bool | false | Add closing X buttons on Tab |
| onChange | (models) => {} | `undefined` | When dragging or closing tab, original model has to changed. `(models) => {this.setState({models: models})}` is recommended. |

### Using your own template

Sometimes, you needs to use tabs functionality but you already has your own markups.
Inheritance might be one of your solution. This works on `v0.2.0` or later.

Just Remember Two functions. `this.renderTabs()` and `this.renderPanel()`

But also remember this. Theming CSS will not work with your template. You have to write your own, new CSS.

```javascript
class OwnTabs extends Rtab {
  render() {
    return (
      <div className="myOwnClass">
        <ul className="blabla-tabs">{this.renderTabs()}</ul>
        <div className="blabla-panels"}>{this.renderPanel()}</div>
      </div>
    )
  }
}
```

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