[](https://travis-ci.org/mikechabot/react-tabify)
[](https://david-dm.org/mikechabot/react-tabify)
[](https://david-dm.org/mikechabot/react-tabify?type=dev)
[](https://nodei.co/npm/react-tabify/)
[](https://github.com/mikechabot/react-tabify)
[](https://github.com/mikechabot/react-tabify)
# react-tabify
A dead simple tab component for ReactJS.
- [Installation](#installation)
- [Basic Example](#basic-example)
- [Components](#components)
- [Controlled vs Uncontrolled Mode](#controlled-vs-uncontrolled-mode)
- [Other Examples](#other-examples)
- [Stacked](#stacked)
- [Nested](#nested)
- [Sticky](#sticky)
- [Container Overflow](#container-overflow)
- [Hiding Tabs](#hiding-tabs)
- [Color Theme](#color-theme)
## Installation
Yarn or npm:
* `$ yarn add react-tabify`
* `$ npm install --save react-tabify`
----
## Basic Example
```js
import { Tab, Tabs } from 'react-tabify';
export default () => (
First Content
Second Content
Third Content
);
```
[](https://codesandbox.io/s/23x92qvy9n)
----
## Components
`react-tabify` consists of two (2) components which need to be used together.
### ``
| Name | Type | Default | Description |
| ------------------ |----------------------| --------------------|---------------------------------------------------------|
| `id` | `string` | `__tabify__` | Id of the `` component |
| `defaultActiveKey` | `string` / `number` | `0` | `eventKey` of the initial `` to render |
| `activeKey` | `string` / `number` | | `eventKey` of the current `` |
| `theme ` | `object` | | Optional color theme |
| `stacked` | `bool` | `false` | Whether to display `` vertically |
| `sticky` | `bool` | `false` | Enable sticky tabs
| `onSelect` | `func` | | Callback fired when a `` is selected |
| `style` | `object` | | style forwarded to the `` containing `` |
| `children` | `node` | | `` components |
----
### ``
| Name | Type | Default | Description |
| ------------------ |----------------------| --------------------|---------------------------------------------------------|
| `eventKey ` | `string` / `number` | `index` | Unique key of the `` |
| `label` | `string` / `node` | | Label of the `` |
| `hide ` | `bool` | false | Whether to hide the `` |
| `style` | `object` | | style forwarded to the `` containing `` |
| `children` | `node` | | Any abritary React node |
----
## Controlled vs Uncontrolled Mode
### Uncontrolled Mode
By default, `` are uncontrolled, and will display the first `` child during initial render. Use `defaultActiveKey` to default to another `` instead.
If `` components are not passed an `eventKey`, they will default to their order index. In the example below, we're defaulting `` to display "Tab 3" since it sits at the second index (`defaultActiveKey={2}`).
```js
export default () => (
First Content
Second Content
Third Content
);
```
[](https://codesandbox.io/s/k9zlwno4zv)
----
### Controlled Mode
Alternatively, to control the component, pass an `activeKey`, however you must pass an `onSelect` callback to handle the event. `onSelect` passes the `eventKey` of the selected ``.
Again, if your `` components are not passed an `eventKey`, they will default to their order index.
```js
import { Tab, Tabs } from 'react-tabify';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
activeKey: 0
};
}
handleTabSelect = activeKey => {
this.setState({ activeKey });
};
render() {
return (
First Content
Second Content
Third Content
);
}
}
```
[](https://codesandbox.io/s/30zw8qz25p)
----
## Other Examples
### Stacked
Add the `stacked` prop to render the tabs vertically.
```js
export default () => (
First Content
Second Content
Third Content
);
```
[](https://codesandbox.io/s/p5y4mpxowq)
----
### Sticky
If `` is uncontrolled, pass `sticky` to "remember" the last active `` between page refreshes. When `sticky` is enabled, you must pass you own `id` to ``. This will be used within `LocalStorage` to distinguish between multiple `` instances.
> `LocalStorage` must be enabled in the browser.
```js
export default () => (
First Content
Second Content
Third Content
);
```
[](https://codesandbox.io/s/ovqynq18k9)
----
### Nested
Easily nest tabs to create a section/subsection layout.
```js
export default () => (
Tab 1 Content 1
Tab 1 Content 2
Tab 1 Content 3
Tab 2 Content 1
Tab 2 Content 2
Tab 2 Content 3
Tab 3 Content 1
Tab 3 Content 2
Tab 3 Content 3
);
```
[](https://codesandbox.io/s/2pvlwjzp60)
----
### Container Overflow
To ensure that scrolling (i.e. `overflow`) is only visible within the `` component, we'll want to wrap `` with a Flexbox whose height is set to `100%`. Otherwise, if our `` had enough content to induce a scrollbar, our entire `` component would be subject to scrolling, which means the clickable tab links (horizontal and stacked) could scroll out of view.
```js
const tabsContainer = {
display: "flex",
height: "100%"
};
const App = () => (
{__getLorumIpsum()}
{__getLorumIpsum()}
{__getLorumIpsum()}
);
```
[](https://codesandbox.io/s/w2wzlnqyw)
----
### Hiding Tabs
Use the `hide` prop to dynmically hide/show `` components. Pass a `bool`, or evaluate a function that returns a `bool`.
```js
// Dummy rejection
const __hasAccess = user => false;
const App = ({ user }) => (
Super Admin Content
!__hasAccess(user)}>
Admin Content
User Content
);
```
[](https://codesandbox.io/s/1y19m2q7mj)
----
## Color Theme
`react-tabify` leverages `` from [glamorous](https://github.com/paypal/glamorous) to expose an optional `theme` object. The `tabs` property of the `theme` controls the horizontal styling, while `menu` controls the stacked view.
> Accepts any valid color (e.g. "red", "#FF0000", "hsl(0, 100%, 50%)", "rgb(255, 0, 0)", etc).
##### Theme object
```js
const theme = {
tabs: {
color: ,
borderBottomColor: ,
active: {
borderBottomColor: ,
color:
},
hover: {
borderBottomColor: ,
color:
}
},
menu: {
color: ,
borderRight: ,
active: {
backgroundColor: ,
color:
},
hover: {
color: ,
backgroundColor:
}
}
};
```
----
Override any of the properties above. Here's a simple example:
```js
const theme = {
tabs: {
color: "red",
active: {
color: "green"
}
}
}
const App = () => (
First Content
Second Content
Third Content
);
```
[](https://codesandbox.io/s/jjw53xqn69)
----
A more complex, yet very ugly example theme:
```js
const theme = {
tabs: {
color: "#FF000",
active: {
color: "green"
}
},
menu: {
color: "hsl(248, 39%, 39%)",
borderRight: "darkmagenta",
active: {
backgroundColor: "rgb(165,42,42)"
},
hover: {
color: "hsl(240, 100%, 50%)"
}
}
};
const App = () => (
Tab 1 Content 1
Tab 1 Content 2
Tab 1 Content 3
Tab 2 Content 1
Tab 2 Content 2
Tab 2 Content 3
Tab 3 Content 1
Tab 3 Content 2
Tab 3 Content 3
);
```
[](https://codesandbox.io/s/nkk5550ox4)