React reusable tab component
npm install 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
!react-re-super-tabs screenshot

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
##### activeTab: string
`js
...
...
`#### TabList
Container for
Tab, TabPanel components
##### children: Array
##### 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
``