react-tabs-lite

This component enables developers to add any content/text or even any component inside tabpanels and by default this component comes with fontawesome icons support

Install

npm install --save react-tabs-lite

Demo

[Click here]https://voletiswaroop.github.io/react-tabs-lite/) for Live Demo

Usage

• User has to import EasyTabs from 'react-tabs-lite' to use the react-tabs-lite component.
• To get default styles import 'react-tabs-lite/dist/index.css' file.

Prop	Description	Default
[section] [element]	User can change the section element as per the requirement	'section'
CustomComponent	User can import any customComponent and that has to be wrapped with <section> element

Basic Example

import React, { Component } from 'react'
import EasyTabs from 'react-tabs-lite'
import 'react-tabs-lite/dist/index.css'
import CustomComponent from './customComponent'

class Example extends Component {
  render() {
    return (
      <EasyTabs defaultSelected={0}>
        <section dataicon='fas fa-search' title='Tab one'>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </section>
        <section dataicon='fas fa-search' title='Tab two'>
          It is a long established fact that a reader will be distracted by the
          readable content of a page when looking at its layout. The point of
          using Lorem Ipsum is that it has a more-or-less normal distribution of
          letters, as opposed to using 'Content here, content here', making it
          look like readable English.
        </section>
      </EasyTabs>
    )
  }
}

CustomComponent

import React, { Component } from 'react'
import EasyTabs from 'react-tabs-lite'
import 'react-tabs-lite/dist/index.css'
import CustomComponent from './customComponent'

class Example extends Component {
  render() {
    return (
      <EasyTabs defaultSelected={0}>
        <section dataicon='fas fa-search' title='Tab one'>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </section>
        <section dataicon='fas fa-search' title='Custom Component'>
          <CustomComponent />
        </section>
      </EasyTabs>
    )
  }
}

Props

Prop	Description	Default
[defaultSelected] [number]	This option allows the users to select default focus tab	0
[dataicon] [string]	This option allows the users to add font awesome icon for tab title	'fas fa-search'
[title] [string]	This option allows the users to add title for the Tab item

Contributing

This is a new project and contributions are welcome so feel free to open an issue or fork and create a pull request. Collaborators are also welcome - please send an email to voleti.swaroop@gmail.com.

License

MIT © voletiswaroop