React reusable tab component
yarn:
yarn add react-re-super-tabs
npm:
npm install react-re-super-tabs --save
import { Tabs, Tab, TabPanel, TabList } from 'react-re-super-tabs'
import { Info, About } from '../information'
import CustomTab from '../CustomTab'
export default () => (
<Tabs activeTab='about'>
<TabList>
<Tab component={() => <div>info</div>} id='info' />
<Tab component={CustomTab} label='about' id='about' />
<Tab component={() => <div>contact</div>} id='contact' />
</TabList>
<TabList>
<TabPanel component={Info} id='info'/>
<TabPanel component={About} id='about'/>
<TabPanel component={() => <p>contact content ...</p>} id='contact' />
</TabList>
</Tabs>
)
Main container for TabList
components. Use exactly two TabList
components for Tab
components with labels, and TabPanel
components with views
<Tabs activeTab='about'>
<TabList>
...
</TabList>
<TabList>
...
</TabList>
</Tabs>
Container for Tab
, TabPanel
components
<Tabs activeTab='info'>
<TabList>
<Tab component={CustomTab} label='info' id='info' />
...
</TabList>
<TabList className={styles.list}>
<TabPanel component={Info} id='info' />
...
</TabList>
</Tabs>
Clickable label component that change the content view - TabPanel
.
Each Tab
component should have an identifier corresponding to the identifier of the TabPanel
component
<Tab component={() => <div>info</div>} id='info' />
with CustomTab
const CustomTab = ({children, isActive}) =>
<span className={`${styles.customTab} ${isActive ? styles.active : ''}`}>{children}</span>
...
<Tab component={CustomTab} id='info' />
remember that you have an access to isActive prop
View component.
Each TabPanel
component should have an identifier corresponding to the identifier of the Tab
component
<TabPanel component={() => <p>info content</p>} id='info' />
<TabPanel component={Info} id='info' />