Source: Tab.js

import React from 'react';
import util from '../util';

/**
 * Tab renders a set of tabs.
 *
 * @note: This only renders the `li` item, not the whole nav or multiple tabs.
 *
 * Use a NavList with class 'nav nav-tabs' to render the whole thing.
 *
 * @param {Object} props
 * @param {String} props.name The name of this tab (Used to tell if it is active)
 * @param {String} props.textLabel The text label for this tab.
 * @param {Function} props.onClick A callback called with the tab name when this tab is clicked.
 * @param {Function} props.onActive A callback called when the tab becomes active.
 *
 */
class Tab extends React.Component {

    componentDidMount() {

        if (this.props.name === this.props.activeOn)
            if (this.props.onActive)
                this.props.onActive(this.props.name);

    }

    clicked(e) {
        e.preventDefault();
        this.props.onClick(this.props.name);
    }

    render() {

        var {name, activeOn, onClick, textLabel, children, href} = this.props;

        return util.skipKeys('li', {
                className:(name === activeOn)? 'active':null
            },
            [].concat(React.createElement('a', {
                    href: href, onClick: (onClick) ?
                        this.clicked.bind(this) : null
                }, (textLabel)?textLabel:name)
                || children));
    }

}

Tab.propTypes = {
    name: React.PropTypes.string,
    href: React.PropTypes.string,
    textLabel: React.PropTypes.string,
    activeOn: React.PropTypes.string,
    onClick: React.PropTypes.func,
    onActive: React.PropTypes.func
};

Tab.defaultProps = {
  href:'javascript:'
};

export default Tab;