https://github.com/techlab/react-smarttab
The awesome react tab component for ReactJS
https://github.com/techlab/react-smarttab
javascript react react-component react-tabs smarttab tab tablayout ui-components
Last synced: 6 months ago
JSON representation
The awesome react tab component for ReactJS
- Host: GitHub
- URL: https://github.com/techlab/react-smarttab
- Owner: techlab
- License: other
- Created: 2020-06-12T16:46:28.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-29T17:30:37.000Z (about 2 years ago)
- Last Synced: 2024-05-01T20:45:09.751Z (almost 2 years ago)
- Topics: javascript, react, react-component, react-tabs, smarttab, tab, tablayout, ui-components
- Language: JavaScript
- Homepage: http://techlaboratory.net/react-smarttab
- Size: 2.68 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Smart Tab
#### The awesome react tab component for ReactJS
[](https://travis-ci.org/techlab/react-smarttab)
[](https://badge.fury.io/js/react-smarttab)
[](https://raw.githubusercontent.com/techlab/react-smarttab/master/LICENSE)
[](https://standardjs.com)
[](https://www.paypal.me/dipuraj)
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](http://techlaboratory.net/jquery-smarttab)
+ [Homepage](http://techlaboratory.net/react-smarttab)
+ [Documentation](http://techlaboratory.net/react-smarttab#documentation)
+ [Demos](http://techlaboratory.net/react-smarttab#demo)
+ [GitHub Issues](https://github.com/techlab/react-smarttab/issues)
Screenshots
-----
Installation
-----
### [NPM](https://www.npmjs.com/package/react-smarttab)
```bash
npm install react-smarttab --save
```
### [Yarn](https://yarn.pm/react-smarttab)
```bash
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
-----
```jsx
import React from 'react'
import { Tabs, TabNav, TabNavItem, TabContent, TabPanel } from 'react-smarttab'
import 'react-smarttab/dist/index.css'
const App = () => {
return (
Tab 1
Tab 2
Tab 3
Tab 4
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 4 Content
)
}
export default App
```
Please see the [documentation](http://techlaboratory.net/react-smarttab#documentation) for more details on implementation and usage.
##### Optional parameters
Please see the [parameter descriptions](http://techlaboratory.net/react-smarttab#parameter-description) for more details.
```jsx
import React from 'react'
import { Tabs, TabNav, TabNavItem, TabContent, TabPanel } from 'react-smarttab'
import 'react-smarttab/dist/index.css'
const App = () => {
return (
{ console.log("leaveTab", currentIndex, nextIndex) }}
onShowTab={(e) => { console.log("showTab", e) }}
>
Tab 1
Tab 2
Tab 3
Tab 4
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 4 Content
)
}
export default App
```
License
----
[MIT License](https://github.com/techlab/react-smarttab/blob/master/LICENSE)
Contribute
----
If you like the project please support with your contribution.
[Donate on Paypal](https://www.paypal.me/dipuraj)
Thank you and Happy Coding!