vanilla-react-tabs
Practical React Tab Library, completely CSS-free, used as less JavaScript as possible.
how to use:
import { Tab, TabProvider } from 'react-vanilla-tabs';
<TabProvider
tabNames={
['Tab 1',
'Tab 2',
...,
'Tab n'
]
}
>
<Tab>
Your First Content Here
</Tab>
<Tab>
Your Second Content Here
</Tab>
<Tab>
Your n Content Here
</Tab>
</TabProvider>
Element | Prop | Type |
---|---|---|
Index | tabNames | string Array |
Note:
// when you code this:
<TabProvider tabName={['Tab Example']}>
<Tab>hello there</Tab>
</TabProvider>
// you actually code this, in order to style it use this as base.
<div className="TabProvider">
<div className="TabProvider__Switch">
<button data-variant="selected">Tab Example</button>
</div>
<div className="TabProvider__Tabs">
<div className="TabProvider__Tab">hello there</div>
</div>
</div>
import { Tab, TabProvider } from 'react-vanilla-tabs';
<TabProvider
namelessSwitch
tabNames={
['Foo Tab Button',
'Bar Tab Button'
]
}
>
<Tab>
Foo Tab Content
</Tab>
<Tab>
Bar Tab Content
</Tab>
<Tab>
Baz Tab Content, has no tab name so it will be replaced with "3"
</Tab>
</TabProvider>