Skip to content

techlab/react-smarttab

Repository files navigation

React Smart Tab

The awesome react tab component for ReactJS

Build Status npm version GitHub license JavaScript Style Guide Donate on Paypal

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

Screenshots

jQuery Smart Tab pills

jQuery Smart Tab dark vertical

jQuery Smart Tab default

jQuery Smart Tab brick

Installation

npm install react-smarttab --save
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

import React from 'react'

import { Tabs, TabNav, TabNavItem, TabContent, TabPanel } from 'react-smarttab'
import 'react-smarttab/dist/index.css'

const App = () => {

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

export default App

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

Optional parameters

Please see the parameter descriptions for more details.

import React from 'react'

import { Tabs, TabNav, TabNavItem, TabContent, TabPanel } from 'react-smarttab'
import 'react-smarttab/dist/index.css'

const App = () => {

  return (
    <Tabs
    tabName='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>  
  )
}

export default App

License

MIT License

Contribute

If you like the project please support with your contribution.

Donate on Paypal

Thank you and Happy Coding!