react-re-super-tabs

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]

[build-badge]: https://travis-ci.org/czosnek7/react-re-super-tabs.svg?branch=master
[build]: https://travis-ci.org/czosnek7/react-re-super-tabs

[npm-badge]: https://img.shields.io/npm/v/react-re-super-tabs.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-re-super-tabs

React reusable tab component

Demo

!react-re-super-tabs screenshot

Installing

yarn:

``yarn add react-re-super-tabs`

npm:

`npm install react-re-super-tabs --save`

Usage

`js
import { Tabs, Tab, TabPanel, TabList } from 'react-re-super-tabs'
import { Info, About } from '../information'
import CustomTab from '../CustomTab'

export default () => (

info

} id='info' />

contact

} id='contact' />

contact content ...

} id='contact' />


)
`

Component API

#### Tabs
Main container for TabList components. Use exactly two TabList components for Tab components with labels, and TabPanel components with views
##### children: Array | TabList
##### activeTab: string
`js


...


...


`

#### TabList
Container for Tab, TabPanel components
##### children: Array | Tab | Array | TabPanel
##### className: string

`js



...



...


`

#### Tab
Clickable label component that change the content view - TabPanel.
Each Tab component should have an identifier corresponding to the identifier of the TabPanel component

##### component: function
##### label: string | number
##### id: string

`js


info

} id='info' />
`
with CustomTab
`js
const CustomTab = ({children, isActive}) =>
${styles.customTab} ${isActive ? styles.active : ''}}>{children}

...

`
remember that you have an access to isActive prop

#### TabPanel
View component.
Each TabPanel component should have an identifier corresponding to the identifier of the Tab component

##### component: function
##### id: string
`js


info content

} id='info' />
`
`js

``