Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mheiber/react-tabs-component
React component for tabs with a clean and flexible API.
https://github.com/mheiber/react-tabs-component
Last synced: 2 months ago
JSON representation
React component for tabs with a clean and flexible API.
- Host: GitHub
- URL: https://github.com/mheiber/react-tabs-component
- Owner: mheiber
- Created: 2015-03-23T00:04:54.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-04-04T13:05:34.000Z (over 9 years ago)
- Last Synced: 2024-10-06T12:36:45.628Z (3 months ago)
- Language: JavaScript
- Size: 310 KB
- Stars: 4
- Watchers: 1
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-tabs-component #
Tabs component for React with the simplest API
This JSX:
```js
var Tabs=require('react-tabs-component');
Tab A Content
Tab B Content
Tab C Content
```
renders this HTML:
```html
Tab A
Tab B
Tab C
Tab B Content
```
In the example above, only the content for Tab B displays, since Tab B is the active tab.
## Installation ##
Use the Common JS Module with [Node](https://nodejs.org/) and either [Browserify](http://browserify.org/) or [WebPack](http://webpack.github.io/).
1. Install on the command line
`npm install react-tabs-component --save`
2. Require it at the top of a JavaScript file
`require('react-tabs-component')`
## Testing ##
`npm test`
## API ##
### Required Prop ###
- `tabNames`—array of strings or components that will display in each tab.
### Children ###
- Each child of the Tabs component will be treated as a content area corresponding to a member of the array passed to `TabNames`. For example, if the first tab is active, then the first child of the Tabs component will render.
### Style-related Props ###
- `classPrefix`—a string to add to the beginning of each CSS class used internally by the Tabs component. The default is the empty string (`''`), so if this prop isn't specified, then class names will be used as in the example below:
JSX:
```js
var Tabs=require('react-tabs-component');
Tab A Content
Tab B Content
Tab C Content
```
HTML:
```html
Tab A
Tab B
Tab C
Tab B Content
```
### Callback Props ###
- `willChange`—fires before the tab changes. Return `false` from `willChange` to prevent the active tab from changing.
- `didChange`—fires after the tab changes.
In the example below, clicking `Tab C` will produce the following results:
1. 'will change tabs from 1 to 2' is logged to the console
2. The active tab changes from Tab B to to tab C. `Tab B Content` un-renders and `Tab C Content` is rendered.
3. 'changed tabs from 1 to 2' is logged to the console
JSX:
```js
var willChange=function(newTabNum,oldTabNum){
console.log('will change tabs from '+newTabNum+' to '+oldTabNum);
};
var didChange=function(newTabNum,oldTabNum){
console.log('changed tabs from '+newTabNum+' to '+oldTabNum);
};
Tab A Content
Tab B Content
Tab C Content
```