ReactJS TabPanel

new-tabpanel.jsx

// Usage
var React = require('react');
var TabPanel = require('./TabPanel.jsx');

var MyTabPanel = React.createClass({
	
	mixins: [TabPanel],
  
  	getDefaultProps: function() {
    		return {
      			tabs: {
        			'Tab One': <div>Tab One</div>,
				'Tab Two': <div>Tab Two</div>,
      			},
      			default: 'Tab One'
    		};
  	}
	
});

React.render(<MyTabPanel/>, document.querySelector('body'))

react-tabpanel.jsx

'use strict';

// Module dependencies
var React = require('react');

var TabPanel = {

  propTypes: {
    // Require tabs configuration
    tabs: React.PropTypes.object.isRequired
  },

  /**
   * Get initial state of tab panel
   * @return {object}
   */
  getInitialState: function() {
    return { component: undefined };
  },

  /**
   * Handle click event of tab
   * @param  {SyntheticEvent} e
   * @param  {string} id
   */
  onClick: function(e, id) {
    var tab = e.target.dataset.tab;
    this.setState({ component: this.props.tabs[tab] });
  },

  /**
   * Render component
   * @return {ReactElement}
   */
  render: function() {
    var tabs = Object.keys(this.props.tabs).map(function(title) {
      return (
        <li onClick={this.onClick} role="presentation">
          <a data-tab={title}>{title}</a>
        </li>
      );
    }.bind(this));
    
    return (
      <div>
        <ul className="nav nav-pills" role="tablist" ref="tabpanelNav">
          {tabs}
        </ul>
        <div ref="tabpanelBody">
          {this.state.component}
        </div>
      </div>
    )
  }

};

module.exports = TabPanel;