JSFiddle - React, Tailwind, and code Playground

by zpao

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

li {
    border: 1px solid skyblue;
    display: inline-block;
    list-style: none;
    margin: 0 5px;
    padding: 3px 6px;
}

li.active {
    border-color: yellow;
}

li.active > a {
    text-decoration: none;
}

ul {
    padding: 0;
}

.hidden {
    display: none;
}

JavaScript 1.7

/** @jsx React.DOM */

var Tabbed = React.createClass({
    clickTab: function(tabId) {
        this.setState({activeId: tabId});
    },
    getInitialState: function() {
        return {
            activeId: this.props.tabs[0].id
        };
    },
    render: function() {
        var tabNodes = this.props.tabs.map(function(tab) {
            var className =
                (this.state.activeId === tab.id) ? "active" : "";

            return (
                <li className={className} key={tab.id}>
                    <a href="#" onClick={this.clickTab.bind(this, tab.id)}>
                      {tab.id}
                    </a>
                </li>
            );
        }, this);
        var children = this.props.children.map(function(child) {
            child.props.isActive = child.props.id === this.state.activeId;
            return child;
        }, this);
        return (
            <div>
                <ul>{tabNodes}</ul>
                {children}
            </div>
        );
    }
});

var Pane = React.createClass({
    render: function() {
        var className = this.props.isActive ? "" : "hidden";

        return (
            <div className={className}>
                {this.props.children}
            </div>
        );
    }
});

var Page = React.createClass({
    clickButton: function() {
        this.setState({message: "Unmount it all"});
    },
    getInitialState: function() {
        return {
            message: "Hi there"
        };
    },
    render: function() {
        return (
            <div>
                <h1>Some tabberific content</h1>
                <Tabbed tabs={[{id: "1st"}, {id: "Second"}]}>
                    <Pane id="1st">
                        <p>{this.state.message}</p>
                        <button type="button" onClick={this.clickButton}>
                            Toggle that content
                        </button>
                    </Pane>
                    <Pane id="Second">
                     ...