React If Component

Render React components conditionally.

This component helps you turn this

render: function() {
    return (
        <div>
            <Header />
            {this.renderBody()}
            </Footer>
        </div>
    );
},
 
renderBody: function() {
 return (this.props.age >= this.props.drinkingAge)
    ? <span class="ok">Have a beer, {this.props.name}!</span>
    : <span class="not-ok">Sorry {this.props.name } you are not old enough.</span>;
}

into this

render: function() {
    return (
        <div>
            <Header />
            <If when={ this.props.age >= this.props.drinkingAge }>
                <Then><span class="ok">Have a beer, {this.props.name}!</span></Then>
                <Else><span class="not-ok">Sorry {this.props.name}, you are not old enough.</span></Else>
            </If>
            </Footer>
        </div>
    );
}

Caveats

With this approach to conditional elements, children of either branch will always be evaluated no matter what. This can be an issue eg. if you're testing an object for nullity, and then try to access one of its property inside of the Then branch. See this StackOverflow discussion as well as issue #1 for more informations.

Install

NPM:

npm install react-if-component

Example

// Browserify:
var If = require('react-if');
 
// Otherwise
var If = ReactIf;
var Stage1 = React.createClass({
    render: function() {
      return (<div>Stage1</div>);
    }
});
 
var Stage2 = React.createClass({
    render: function() {
      return (<div>Stage2</div>);
    }
});
 
var Beer = React.createClass({
 
    getInitialState: function() {
      return {
        stage: true
      };
    },
 
    changeStage() {
      this.setState({ stage: !this.state.stage })
    },
 
    render: function() {
      return (
        <div id="some-id">
          <button onClick={ this.changeStage }>Change Stage</button>
          <If when={ this.state.stage }>
            <Stage1 />
          </If>
          <If when={ !this.state.stage }>
            <Stage2 />
          </If>
        </div>
      )
    }
 
});
 
React.renderComponent(
    <Beer />,
    document.getElementById('example')
);

API

<If />

Property	Type
when	Boolean

If when evaluates to true, renders the children block will be rendered, otherwise renders the null block.

License

React If Component is released under the MIT license.