react-re-super-tabs
React reusable tab component
Demo
Installing
yarn:
yarn add react-re-super-tabs
npm:
npm install react-re-super-tabs --save
Usage
<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>
Component API
Tabs
Main container for TabList
components. Use exactly two TabList
components for Tab
components with labels, and TabPanel
components with views
Array<TabList> | TabList
children: string
activeTab: <Tabs activeTab='about'> <TabList> ... </TabList> <TabList> ... </TabList></Tabs>
TabList
Container for Tab
, TabPanel
components
Array<Tab> | Tab | Array<TabPanel> | TabPanel
children: string
className: <Tabs activeTab='info'> <TabList> <Tab component=CustomTab label='info' id='info' /> ... </TabList> <TabList className=styleslist> <TabPanel component=Info id='info' /> ... </TabList></Tabs>
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
function
component: string | number
label: string
id: <Tab component= <div>info</div> id='info' />
with CustomTab
const CustomTab = <span className=` `>children</span> ...<Tab component=CustomTab id='info' />
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
function
component: string
id: <TabPanel component= <p>info content</p> id='info' />
<TabPanel component=Info id='info' />