React Smart Tab

The awesome react tab component for ReactJS

React Smart Tab is a React component library for easy implementation of tab interface.

If you think it is cool, you should also check it's sibling jQuery Smart Tab

• Homepage
• Documentation
• Demos
• GitHub Issues

Screenshots

Installation

NPM

npm install react-smarttab --save

Yarn

yarn add react-smarttab

Features

• Responsive design
• Standalone CSS
• Bootstrap compatible
• Various themes included
• Customizable CSS
• Supports all modern browsers
• Easy to implement
• Callback event support

Usage

importReactfrom'react'import{Tabs,TabNav,TabNavItem,TabContent,TabPanel}from'react-smarttab'import'react-smarttab/dist/index.css'constApp=()=>{return(<Tabs><TabNav><TabNavItem>Tab 1</TabNavItem><TabNavItem>Tab 2</TabNavItem><TabNavItem>Tab 3</TabNavItem><TabNavItem>Tab 4</TabNavItem></TabNav><TabContent><TabPanel>
Tab 1 Content
</TabPanel><TabPanel>
Tab 2 Content
</TabPanel><TabPanel>
Tab 3 Content
</TabPanel><TabPanel>
Tab 4 Content
</TabPanel></TabContent></Tabs>)}exportdefaultApp

Please see the documentation for more details on implementation and usage.

Optional parameters

Please see the parameter descriptions for more details.

importReactfrom'react'import{Tabs,TabNav,TabNavItem,TabContent,TabPanel}from'react-smarttab'import'react-smarttab/dist/index.css'constApp=()=>{return(<TabstabName='tab1'selected='0'theme='dark'orientation='horizontal justified='true'
enableURLhash={true}onLeaveTab={(currentIndex,nextIndex)=>{console.log("leaveTab",currentIndex,nextIndex)}}onShowTab={(e)=>{console.log("showTab",e)}}><TabNav><TabNavItem>Tab 1</TabNavItem><TabNavItem>Tab 2</TabNavItem><TabNavItem>Tab 3</TabNavItem><TabNavItem>Tab 4</TabNavItem></TabNav><TabContent><TabPanel>
Tab 1 Content
</TabPanel><TabPanel>
Tab 2 Content
</TabPanel><TabPanel>
Tab 3 Content
</TabPanel><TabPanel>
Tab 4 Content
</TabPanel></TabContent></Tabs>)}exportdefaultApp

License

MIT License

Contribute

If you like the project please support with your contribution.

Donate on Paypal

Thank you and Happy Coding!