React Smart Tab

The awesome react tab component for ReactJS


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

Build Status npm version GitHub license Donate on Paypal

Demo

Installation

NPM
npm install react-smarttab --save
Yarn
yarn add react-smarttab

Features

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

Documentation

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

Advanced Options

Optional parameters
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={tabSettings.selected}
        theme={tabSettings.theme}
        orientation={tabSettings.vertical ? 'vertical' : 'horizontal'}
        justified={tabSettings.justified.toString()}
        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

Parameters

selected

Zero based index of the tab to be selected.

tabName

Name of the tab. Used to prefix the URL hash

theme

The theme of the tab. Built in themes are (default, classic, dark, brick, round, pills, github, sourceforge)

orientation

Orientation of the tab anchors. 'vertical' or 'horizontal'

justified

justify the tab anchors. 'true' or 'false'

Events

onLeaveTab

Callback function invoked when a tab is about to leave. currentIndex and nextIndex are passed to the function. The navigation can be cancelled by passing false to this function.

  onLeaveTab={(currentIndex, nextIndex) => { console.log("leaveTab", currentIndex, nextIndex) }}
onShowTab

Callback function invoked when a tab is shown. currentIndex are passed to the function.

  onShowTab={(currentIndex) => { console.log("showTab", currentIndex) }}

License

Released under the terms of the MIT License (more). You are free to use on both personal and commercial environment as long as the copyright header is left intact.

A little help is always a beautiful thing...

We are committed to deliver free and open source projects. Your support keep us on the track and make us deliver bigger things for you.

Help us improve

React Smart Tab is a free and open-source project, and we are trying hard to improve the project as per the feedback from you. Please help us finding bugs or issues on this project, or give us an idea for a feature. Also, you are most welcome to improve the code, please create a pull-request on the project repository on GitHub.

Dipu Raj

Dipu Raj

Full-stack developer in JavaScript, PHP and C# with added interest in Angular, React, jQuery and Bootstrap. Believes the code should be as beautiful as the design.