Wondering what’s next for npm?Check out our public roadmap! »

react-tabz

1.1.63 • Public • Published

React Tabz

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
};

Install

npm i react-tabz

DownloadsWeekly Downloads

2

Version

1.1.63

License

MIT

Unpacked Size

28.7 kB

Total Files

14

Last publish

Collaborators

  • avatar