react-responsive-tabs
Version:
React responsive tabs
109 lines (76 loc) • 4.69 kB
Markdown
# React responsive tabs
#### [Live demo](http://maslianok.github.io/react-responsive-tabs/)
### Your feedback is highly appreciated!
Please, file an issue if something went wrong or let me know via Twitter @maslianok
#### Responsive
- Hide tabs under the 'Show more' option when they don't fit into the screen
- Transform tabs into the accordion when the wrapper width reaches the `transformWidth` value
#### Accessible
The component outputs HTML code that follows accessibility principles (aka [WAI-ARIA](https://en.wikipedia.org/wiki/WAI-ARIA)) and uses ARIA attributes such as `role`, `aria-selected`, `aria-controls`, `aria-labeledby` etc.
#### Fast
We are using [`react-resize-detector`](https://github.com/maslianok/react-resize-detector). No timers. Just pure event-based element resize detection.
## Installation
`npm install react-responsive-tabs`
## Demo
#### [Live demo](http://maslianok.github.io/react-responsive-tabs/)
Local demo
```sh
# 1. clone the repository
git clone https://github.com/maslianok/react-responsive-tabs.git
# 2. Install react-responsive-tabs dependencies. You must do it because we use raw library code in the example
cd react-responsive-tabs
npm install
# 3. Install dependencies to run the example
cd examples
npm install
# 4. Finally run the example
npm start
```
## Example
```javascript
import React, { Component } from 'react';
import { render } from 'react-dom';
import Tabs from 'react-responsive-tabs';
// IMPORTANT you need to include the default styles
import 'react-responsive-tabs/styles.css';
const presidents = [
{ name: 'George Washington', biography: '...' },
{ name: 'Theodore Roosevelt', biography: '...' },
];
function getTabs() {
return presidents.map((president, index) => ({
title: president.name,
getContent: () => president.biography,
/* Optional parameters */
key: index,
tabClassName: 'tab',
panelClassName: 'panel',
}));
}
const App = () => <Tabs items={getTabs()} />;
render(<App />, document.getElementById('root'));
```
## API
All entities listed below should be used as props to the `Tabs` component.
| Prop | Type | Description | Default |
| ---------------- | ------------- | ---------------------------------------------------------------------------- | --------- |
| items | Array | Tabs data | [] |
| beforeChange | Function | Fires right before a tab changes. Return `false` to prevent the tab change | undefined |
| onChange | Function | onChange callback | undefined |
| selectedTabKey | Number/String | Selected tab | undefined |
| showMore | Bool | Whether to show `Show more` or not | `true` |
| showMoreLabel | String/Node | `Show more` tab name | `...` |
| transform | Bool | Transform to accordion when the wrapper width is less than `transformWidth`. | `true` |
| transformWidth | Number | Transform width. | 800 |
| unmountOnExit | Bool | Whether to unmount inactive tabs from DOM tree or not | `true` |
| tabsWrapperClass | String | Wrapper class | undefined |
| tabClassName | String | Tab class | undefined |
| panelClassName | String | Tab panel class | undefined |
| allowRemove | Bool | Allows tabs removal. | `false` |
| removeActiveOnly | Bool | Only active tab has removal option | `false` |
| showInkBar | Bool | Add MaterialUI InkBar effect | `false` |
| uid | any | An optional external id. The component rerenders when it changes | undefined |
### License
MIT