This is a reusable tab component, created using create-react-app
You will first need to clone this repo
$ git clone [email protected]:seansylee/react-tabs.git
Then, install dependencies
$ npm install
Here is an example usage.
import {TabLayout, TabContainer, TabContent, Tab} from './components/TabLayout'
export const Tabs = () => {
return(
<TabLayout>
<TabContainer>
<Tab name="Tab 1" tabID="1"/>
<Tab name="Tab 2" tabID="2"/>
<TabContainer />
<TabContent tabID="1">
<div> THIS IS THE CONTENT FOR TAB 1<div/>
<TabContent/>
<TabContent tabID="2">
<div> MORE CONTENT FOR TAB 2<div/>
<TabContent />
<TabLayout />
)
}
Each tab component
name
Display name for the Tab component
tabID
ID to be associated for the unique tab (Will be used to connect to the corresponding <TabContent/>
)
Display box for content of each Tab,
tabID
ID tied to each <Tab />
component
Rendered using props.children
<TabContent tabID="1">
...
...
<div>
Any other content
<div/>
<TabContent/>
The overall container for all the components with this app.
Container for the <Tab/>
components, horizontally organized.