vanilla-react-tabs

Practical React Tab Library, completely CSS-free, used as less JavaScript as possible.

how to use:

1import { Tab, TabProvider } from 'react-vanilla-tabs';
2
3<TabProvider
4  tabNames={
5    ['Tab 1',
6      'Tab 2',
7      ...,
8      'Tab n'
9    ]
10  }
11>
12  <Tab>
13    Your First Content Here
14  </Tab>
15  <Tab>
16    Your Second Content Here
17  </Tab>
18  <Tab>
19    Your n Content Here
20  </Tab>
21</TabProvider>
22

Element	Prop	Type
Index	tabNames	string Array

Note:

1
2// when you code this:
3<TabProvider tabName={['Tab Example']}>
4  <Tab>hello there</Tab>
5</TabProvider>
6// you actually code this, in order to style it use this as base.
7<div className="TabProvider">
8  <div className="TabProvider__Switch">
9    <button data-variant="selected">Tab Example</button>
10  </div>
11  <div className="TabProvider__Tabs">
12    <div className="TabProvider__Tab">hello there</div>
13  </div>
14</div>

1import { Tab, TabProvider } from 'react-vanilla-tabs';
2<TabProvider
3  namelessSwitch
4  tabNames={
5    ['Foo Tab Button',
6      'Bar Tab Button'
7    ]
8  }
9>
10  <Tab>
11    Foo Tab Content
12  </Tab>
13  <Tab>
14    Bar Tab Content
15  </Tab>
16  <Tab>
17    Baz Tab Content, has no tab name so it will be replaced with "3"
18  </Tab>
19</TabProvider>