react-easy-tabs-component
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-easy-tabs-component
Demo
Click here for Live Demo
Usage
- User has to import
EasyTabs
from 'react-easy-tabs-component' to use the react-easy-tabs-component component. - To get default styles import
'react-easy-tabs-component/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-easy-tabs-component'import 'react-easy-tabs-component/dist/index.css'import CustomComponent from './customComponent' { return <EasyTabs => <section ='fas fa-search' ='Tab one'> Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the 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 ='fas fa-search' ='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-easy-tabs-component'import 'react-easy-tabs-component/dist/index.css'import CustomComponent from './customComponent' { return <EasyTabs => <section ='fas fa-search' ='Tab one'> Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the 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 ='fas fa-search' ='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