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

Accessible react tab component

> Supports React 0.14.9+, 15.3+ and 16+

## Installing

```bash
yarn add 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 [`examples/umd`](./examples/umd/) folder.
The development UMD build also needs the package `prop-types` being loaded besides `react`.

## Demo

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

(TODO: This demos are outdated and use super old versions of react and react-tabs)

## Basic Example

```js
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

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><commit_msg>chore(docs): Update link to website<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 0.14.9+, 15.3+ and 16+

## Installing

```bash
yarn add 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 [`examples/umd`](./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';

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>
{'fraction_non_alphanumeric': 0.1686602870813397, 'fraction_numerical': 0.015151515151515152, 'mean_word_length': 3.663568773234201, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 41, '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': '6355480', 'n_tokens_mistral': 922, 'n_tokens_neox': 866, 'n_words': 218}