|
| children | node | | Any abritary React node |

----

Controlled vs Uncontrolled Mode

$3

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

);
`
![Edit k9zlwno4zv](https://codesandbox.io/s/k9zlwno4zv)

----

$3

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

);
}
}
`

![Edit 30zw8qz25p](https://codesandbox.io/s/30zw8qz25p)

----

Other Examples

$3

Add the stacked prop to render the tabs vertically.

`js
export default () => (

First Content
Second Content
Third Content

);
`
![Edit p5y4mpxowq](https://codesandbox.io/s/p5y4mpxowq)

----

$3

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

);
`
![Edit ovqynq18k9](https://codesandbox.io/s/ovqynq18k9)

----

$3

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



);
`

![Edit 2pvlwjzp60](https://codesandbox.io/s/2pvlwjzp60)

----

$3

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



);
`


----

$3

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 }) => (



);
`


----

Color Theme

react-tabify leverages from 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

);
`

![Edit jjw53xqn69](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



);
``