react-vanilla-tabs
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

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>

Package Sidebar

Install

npm i react-vanilla-tabs

Weekly Downloads

2

Version

1.2.0

License

MIT

Unpacked Size

5.85 kB

Total Files

7

Last publish

Collaborators

  • melihfirat