<commit_before># react-tabs [![Build Status](https://travis-ci.org/reactjs/react-tabs.svg?branch=master)](https://travis-ci.org/reactjs/react-tabs) [![npm version](https://img.shields.io/npm/v/react-tabs.svg)](https://www.npmjs.com/package/react-tabs)

An accessible and easy tab component for ReactJS.

https://reactcommunity.org/react-tabs/

> Supports React 16.3.0 or newer

<ins><blockquote class="rich-diff-level-zero"> <p class="rich-diff-level-one">react-tabs was tested on real mobile devices and browsers with<br>
  <img src="http://reactcommunity.org/react-tabs/7215e21fc3d710d2257900135d6fc03c.svg" height="50" alt="Browserstack">

</p> </blockquote></ins>

## Installing

```bash
yarn add react-tabs
```
or
```bash
npm install --save react-tabs
```

You can also use react-tabs directly as UMD build in an HTML document by adding

```html
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js" />
<!-- or -->
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js" />
```

For example usages of the UMD builds have a look at the [`old_examples/umd`](./old_examples/umd/) folder.
The development UMD build also needs the package `prop-types` being loaded besides `react`.

## Basic Example

```js
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import "react-tabs/style/react-tabs.css";

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>
    </TabPanel>
  </Tabs>
);
```

## API

### resetIdCounter(): void

Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.

You should never need to use this in the browser. Only if you are running an isomorphic react app that is rendered on the server you should call `resetIdCounter()` before every render so that the ids that get generated on the server match the ids generated in the browser.

```js
import { resetIdCounter } from 'react-tabs';

resetIdCounter();
ReactDOMServer.renderToString(...);
```

## Components

react-tabs consists of 4 components which all need to be used together.
<commit_msg>docs: Clarify which render<commit_after># react-tabs [![Build Status](https://travis-ci.org/reactjs/react-tabs.svg?branch=master)](https://travis-ci.org/reactjs/react-tabs) [![npm version](https://img.shields.io/npm/v/react-tabs.svg)](https://www.npmjs.com/package/react-tabs)

An accessible and easy tab component for ReactJS.

https://reactcommunity.org/react-tabs/

> Supports React 16.3.0 or newer

<ins><blockquote class="rich-diff-level-zero"> <p class="rich-diff-level-one">react-tabs was tested on real mobile devices and browsers with<br>
  <img src="http://reactcommunity.org/react-tabs/7215e21fc3d710d2257900135d6fc03c.svg" height="50" alt="Browserstack">

</p> </blockquote></ins>

## Installing

```bash
yarn add react-tabs
```
or
```bash
npm install --save react-tabs
```

You can also use react-tabs directly as UMD build in an HTML document by adding

```html
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js" />
<!-- or -->
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js" />
```

For example usages of the UMD builds have a look at the [`old_examples/umd`](./old_examples/umd/) folder.
The development UMD build also needs the package `prop-types` being loaded besides `react`.

## Basic Example

```js
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import "react-tabs/style/react-tabs.css";

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>
    </TabPanel>
  </Tabs>
);
```

## API

### resetIdCounter(): void

Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.

You should never need to use this in the browser. Only if you are running an isomorphic react app that is rendered on the server you should call `resetIdCounter()` before every page render so that the ids that get generated on the server match the ids generated in the browser.

```js
import { resetIdCounter } from 'react-tabs';

resetIdCounter();
ReactDOMServer.renderToString(...);
```

## Components

react-tabs consists of 4 components which all need to be used together.

{'fraction_non_alphanumeric': 0.1437192668752794, 'fraction_numerical': 0.017881090746535537, 'mean_word_length': 4.045095828635851, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 61, 'https://': 14, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6356094', 'n_tokens_mistral': 1533, 'n_tokens_neox': 1436, 'n_words': 444}