Package Exports

react-if

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-if) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React If

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 condition={ this.props.age >= this.props.drinkingAge }>
                <Then><span class="ok">Have a beer, {this.props.name}!</span></Then>
                <Else>
                  {() => {
                    return <span>Sorry, {this.props.name}, you are not old enough.</span>
                  }}
                </Else>
            </If>
            </Footer>
        </div>
    );
}

Install

NPM:

npm install react-if

Bower:

bower install react-if

Example

// Browserify:
var If = require('react-if');
var Then = If.Then;
var Else = If.Else;

// Otherwise
var If = ReactIf;
var Then = If.Then;
var Else = Else.Then;

var Beer = React.createClass({
    
    getDefaultProps: function() {
        return {
            drinkingAge: 16 // Yay, Switzerland!
        };
    },
    
    render: function() {
        return (
            <div>
                <If condition={ this.props.age >= this.props.drinkingAge }>
                    <Then>Have a beer, {this.props.name}!</Then>
                    <Else>
                      {() => {
                        return <span>Sorry, {this.props.name}, you are not old enough.</span>
                      }}
                    </Else>
                </If>
            </div>
        );
    }
        
});

API

<If />

Property	Type
`condition`	Boolean

If condition evaluates to true, renders the <Then /> block will be rendered, otherwise renders the <Else /> block.

This component can contain any number of <Then /> or <Else /> blocks, but only the first block of the right type (either Then or Else, depending on the condition) will be rendered.

<Then />

Must contain only a single child, which it renders as-is. Should not be used outside of an <If /> block.

<Else />

Must only contain a single child, which it renders as-is. Should not be used outside of an <If /> block.

License

React If is released under the MIT license.