1.1.1 • Published 1 year ago
react-vanilla-tabs-ts v1.1.1
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 tabNames={['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']}>
// Baz has no tab name so it will be replaced with "3"
<Tab>Foo Tab Content</Tab>
<Tab>Bar Tab Content</Tab>
<Tab>Baz Tab Content</Tab>
</TabProvider>