Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-smarttab

2.0.1 • Public • Published

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

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

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!

Install

npm i react-smarttab

DownloadsWeekly Downloads

8

Version

2.0.1

License

MIT

Unpacked Size

57.3 kB

Total Files

8

Last publish

Collaborators

  • avatar