React Tabz

###Demo Link for demo

install

npm i react-tabz

import * as React from 'react';
import {Tab} from "react-tabz";

const headings = ["First Tab Heading", "Second Tab Heading"];

<Tab headings={headings}
    className="yourClassForTabComponent"
    tabItemClassName="someClassForContentPanel"
    tabSeparatorClassName="YourClassNameForTabSeparator">
        <div /*tabItemClassName class will be here */ >Tab panel content 1</div>
        <div>Tab panel content 2</div>
</Tab>

You can disable separator, in case that you want create it by pure CSS

<Tab headings={headings}
    useSeparator={false}>
        <div>Tab panel content 1</div>
        <div>Tab panel content 2</div>
</Tab>

Tab props

Tab.propTypes = {
        headings: PropTypes.arrayOf(PropTypes.string),
        children: PropTypes.arrayOf(PropTypes.element.isRequired),
        className: PropTypes.string,
        tabItemClassName: PropTypes.string,
        tabSeparatorClassName: PropTypes.string,
        onTabChange: PropTypes.func
    };
    

TabItem props

TabItem.propTypes = {
        text: PropTypes.string,
        checked: PropTypes.bool,
        onClick: PropTypes.func,
        className: PropTypes.string
    };

TabSeparator props

TabSeparator.propTypes = {
    className: PropTypes.string
};

Tab.defaultProps = {
    useSeparator: true
};