Minimalist TabSet component for React

readme.md

TabSet Component for React

Provides tabs for React with a very clean API:

<TabSet 
	tabNames={['A label','B label','C label']}
	headerStyle={headerStyle}
	activeHeaderStyle={activeHeaderStyle}
	onTabChange={onTabChange}
>
	<div>Tab Content A</div>
	<div>Tab Content B</div>
	<div>Tab Content C</div>
</Tabset>

Tabset accepts the following props:

Required Prop

• tabNames array of strings that will display at the top of each top

Style-related Props

• style style for the tab container
• className className for the tab container
• headerStyle
• headerClassName
• activeHeaderStyle
• activeHeaderClassName

Callback

• onTabChange fires after the tab changes

Try on Plunker: http://plnkr.co/edit/68KIqXLWBkqYA6wiwg2H

Try on bl.ocks: http://bl.ocks.org/mheiber/93046fa59e04c0cdf57a

Tabset.html

<!--
  Try on Plunker: http://plnkr.co/edit/68KIqXLWBkqYA6wiwg2H?p=preview
  Try on bl.ocks: http://bl.ocks.org/mheiber/93046fa59e04c0cdf57a
-->
<script src='http://fb.me/react-0.12.2.js'></script>
<script src='http://fb.me/JSXTransformer-0.12.2.js'></script>
<script src="https://cdn.polyfill.io/v1/polyfill.min.js"></script>
<script type="text/jsx">
  
  var TabSet=React.createClass({
  	getInitialState:function(){
  		return {activeTabIndex:0}
  	},
  	propTypes:{
  	  style:React.PropTypes.object,
  	  className:React.PropTypes.string,
  		tabNames:React.PropTypes.array.isRequired,
  		headerStyle:React.PropTypes.object,
  		headerClassName:React.PropTypes.string,
  		activeHeaderStyle:React.PropTypes.object,
  		activeHeaderClassName:React.PropTypes.string,
  		onTabChange:React.PropTypes.func
  	},
  	changeTab:function(e){
  	  var callback=this.props.onTabChange || function(){};
  		var tabTarget=parseInt(e.target.getAttribute('data-index'));
  		this.setState({activeTabIndex:parseInt(tabTarget)},function(){
  		  callback(tabTarget);
  		});
  	},
  	render:function(){
  	  var className=this.props.className || '';
  	  var style=this.props.style || {};
  	  var headerClassName=this.props.headerClassName || '';
  	  var activeHeaderClassName=this.props.activeHeaderClassName || headerClassName;
  		var headerStyle=this.props.headerStyle || {};
  		var activeHeaderStyle=this.props.activeHeaderStyle || headerStyle;
      var activeTabIndex=this.state.activeTabIndex;
  		var activeTab;
  		//Set activeTab to be the tab whose index matches
  		//this.state.activeIndex
  		this.props.children.forEach(function(child,index){
  			if(index===this.state.activeTabIndex){
  				activeTab=child;
  			}
  		}.bind(this));
  
  		var headers= this.props.tabNames.map(function(tabName,index){
  			return <span key={index}
  					 style={index===activeTabIndex? activeHeaderStyle : headerStyle} 
  					 className={index===activeTabIndex? activeHeaderClassName : headerClassName} 
  					 data-index={index} 
  					 onClick={this.changeTab}
  					>
  					{tabName}
  					</span>
  		}.bind(this));
  

  
  		return <div>
  		         <nav style={style} className={className}>{headers}</nav>{activeTab}</div>
  	}
  })
  
  
var contentStyle={margin:'20px 5px ',
                 padding:'5px',
                 paddingBottom:'50px', 
                 border:'black solid'
                };
var headerStyle={backgroundColor:'lightBlue', 
                margin:'5px',
                padding:'5px',
                cursor: 'pointer',
	 	            border:'black solid 2px'
	 	            };
var activeHeaderStyle=Object.assign({},headerStyle,{
                      fontWeight:'bolder',
                      cursor: 'default',
                      boxShadow:'0px 3px 10px 1px rgba(130,120,130,1)'
});

var onTabChange=function(tabIndex){
  console.log('Switched to tab '+tabIndex);
  
};

  //Each child is treated as a tab content area
  //Pass in tabNames
  //optionally provide headerStyle to style tabs
  var TabSetExample=React.createClass({
  	render: function(){
  		return (
  			<TabSet
  			   tabNames={['Tab A','Tab B','Tab C']}
  			   headerStyle={headerStyle}
  			   activeHeaderStyle={activeHeaderStyle}
  			   onTabChange={onTabChange}
  			   className={'tabset'}
  			 >
  				 <div style={contentStyle}>Tab A Content</div>
  				 <div style={contentStyle}>Tab B Content</div>
  				 <div style={contentStyle}>Tab C Content</div>
  			 </TabSet>
  		);
  	}
  });
  
  React.render(<TabSetExample/>,document.getElementById("react-target"));
  
</script>
<body><div id="react-target" style="margin-top:20px"></div></body>