https://github.com/pedronauck/react-simpletabs
Just a simple tabs component built with React
https://github.com/pedronauck/react-simpletabs
Last synced: 9 days ago
JSON representation
Just a simple tabs component built with React
- Host: GitHub
- URL: https://github.com/pedronauck/react-simpletabs
- Owner: pedronauck
- License: mit
- Created: 2014-09-30T23:15:08.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-10-03T08:45:26.000Z (over 6 years ago)
- Last Synced: 2025-03-30T02:05:50.075Z (16 days ago)
- Language: JavaScript
- Size: 119 KB
- Stars: 184
- Watchers: 6
- Forks: 76
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-simpletabs - Just a simple tabs component built with React. (Uncategorized / Uncategorized)
- awesome-list - react-simpletabs - Just a simple tabs component built with React. (Demos / Tabs)
README
# React SimpleTabs
  
[](https://nodei.co/npm/react-simpletabs/)
This is a simple `` component built with ReactJS.
#### See the [Demo](http://embed.plnkr.co/p6YVUK/preview).
## Install
Installing this component is very easy and it has just one dependency: [React](http://facebook.github.io/react/downloads.html). So, you have a lot of options to do that:
- Using NPM *~the quickest way~*
```bash
$ npm install --save react-simpletabs
```
- Using Bower
```bash
$ bower install --save react-simpletabs
```
- Or if you want to [download the lastest release](https://github.com/pedronauck/react-simpletabs/archive/v0.7.0.zip) and put in your website, it will work too!
**NOTICE:** You need just one thing to make the component work. Put the [base component style](./dist/react-simpletabs.css) at the `` tag. If you don't wanna use the `.css` extension, you can get the `.styl` or `.scss` extension at the folder `./lib`.
Then you're done! :smile_cat:
## Usage
Using the component is simpler than installing. See an example with [browserify](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/) to bundle your script:
```javascript
/** @jsx React.DOM */
var Tabs = require('react-simpletabs');
var App = React.createClass({
render: function() {
return (
Content #1 here
Content #2 here
Content #3 here
);
}
});
React.renderComponent(, mountNode);
```
If you decide to use just Javascript without any module loader, you can get the global variable `window.ReactSimpleTabs` *(or just `ReactSimpleTabs`)*:
```javascript
/** @jsx React.DOM */
var Tabs = ReactSimpleTabs;
var App = React.createClass({
render: function() {
...
}
});
```
##### ``
Well, the `Tabs.Panel` component is a [namespaced component](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) of the `Tabs`, this is easiest way and you avoid to declare a bunch of variables.
**NOTE:** It is required that you put the `title` property to the `Tabs.Panel` component. Without this, the component won't work, ok?
## Behind the Scene
There are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.
So, the semantic HTML structure will be something like this:
```html
The content of active panel here
```
This is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is a [real functional example](/example) that you can follow.
The other thing that I have to share with you is that the component has some properties that you can use. Example:
If you want to set a default tab active you can use the `tabActive` property:
```javascript
...
render: function() {
return (
...
);
}
...
```
And if you want to do something before or after the changed tab, you can do use the `onBeforeChange` or `onAfterChange` property (or both together):
```javascript
...
handleMount: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
console.log('on mount, showing tab ' + selectedIndex);
},
handleBefore: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
console.log('Something before tab ' + selectedIndex);
},
handleAfter: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
console.log('Something after tab ' + selectedIndex);
},
render: function() {
return (
...
);
}
...
```
For more details, check out the API below.
## Component API
`` component:
Property | Type | Default | Required | Description
-------- | ---- | ------- | -------- |-----------
className | `Array\|Object\|String` | n/a | no | Additional class names for wrapping div
tabActive | `Number` | 1 | no | The default tab active
onMount | `Function` | n/a | no | The function that will be executed when the component is mounted
onBeforeChange | `Function` | n/a | no | The function that will be executed **before** the state of the component change. Return `false` to cancel the change to the active tab.
onAfterChange | `Function` | n/a | no | The function that will be executed **after** the state of the component change
`` component:
Property | Type | Default | Required | Description
-------- | ---- | ------- | -------- |-----------
title | `String` | n/a | yes | The title that will generate the *tab menu items*
## Contributing
Anyone can help make this project better - check out the [Contributing guide](CONTRIBUTING.md)!
## License
See the [License](LICENSE) file.