react-vanilla-tabs

react-vanilla-tabs (TS)

CSS free React Component, solution based and simple. Now has Typescript support.

how to use:

Simply call TabProvider and inside provider wrap your tabs in Tab tag volala!

Anything in TabProvider without wrapped with Tab will be ignored.

Minimum two Tabs should be defined in order to use package properly.

Examples:

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>
  <div>
    This will be ignored because it's not wrapped in <Tab> tag.
  </div>
</TabProvider>

Element	Prop	Type
TabProvider	tabNames	string Array
TabProvider	children	any more than 1
Tab	none	-

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>

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>