react-lazy-if

Conditionally render React components with a lazily evaluated attribute (similar to Angular's ng-if)

Before

var Example = React.createClass({
    render: function() {
        var conditionalDiv     = null;
        var otherCondtionalDiv = null;
 
        if (this.props.showMe) {
            otherCondtionalDiv = (
                <div>
                    <h2>Goodbye, World</h2>
                    <span>Have fun in {this.props.nationality}</span>
                </div>
            )
        } else {
            otherCondtionalDiv = (
                <div>
                    <h2>Goodbye, World</h2>
                    <span>This is not the div you're looking for</span>
                </div>
            )
        }
 
        if (this.props.check) {
            conditionalDiv = (
                <div>
                    <h1>Hello, World</h1>
                    <span>Your name is {this.props.name}!</span>
                    {otherCondtionalDiv}
                </div>
            );
        }
 
        return (
            <div id="some-id">
                {conditionalDiv}
            </div>
        );
    }
 
});
 
ReactDOM.render(
    <Example check={true} showMe={true} name="Ryan" nationality="Germany"/>,
    document.getElementById('example')
);

After

var If         = ReactIf;
var ifEvaluate = ReactIf.ifEvaluate;
 
var Example = React.createClass({
    render: function() {
        return (
            <div id="some-id">
                <If condition={ ifEvaluate(this.props.check) }>
                    <div>
                        <h1>Hello, World</h1>
                        <span>Your name is {this.props.name}!</span>
                        <If condition={ ifEvaluate(this.props.showMe) }>
                            <div>
                                <h2>Goodbye, World</h2>
                                <span>Have fun in {this.props.nationality}</span>
                            </div>
                        </If>
                        <If condition={ ifEvaluate(!this.props.showMe) }>
                            <div>
                                <h2>Goodbye, World</h2>
                                <span>This is not the div you're looking for</span>
                            </div>
                        </If>
                    </div>
                </If>
            </div>
        );
    }
});
 
ReactDOM.render(
    <Example check={true} showMe={false} name="Ryan" nationality="Germany"/>,
    document.getElementById('example')
);