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 turns this

render() {
    return (
        <div>
            <Header />
            {this.renderBody()}
            <Footer />
        </div>
    );
},

renderBody() {
 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() {
    return (
        <div>
            <Header />
            <If condition={ this.props.age >= this.props.drinkingAge }>
                <Then><span class="ok">Have a beer, {this.props.name}!</span></Then>
                <Else>{() =>
                  <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

import { If, Then, Else } from 'react-if';

class Beer extends React.Component {

    render() {
        return (
            <div>
                <If condition={ this.props.age >= 16 }>
                    <Then>Have a beer, {this.props.name}!</Then>
                    <Else>{() => // will only be evaluated if the condition fails.
                       <span>Sorry, {this.props.name}, you are not old enough.</span>
                    }</Else>
                </If>
            </div>
        );
    }

});

// ES2015
import { If, Then, Else } from 'react-if';

// CommonJS:
const { If, Then, Else } = require('react-if');

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

API

<If />

Property	Type
`condition`	Boolean

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

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.