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 className="ok">Have a beer, {this.props.name}!</span>
    : <span className="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 className="ok">Have a beer, {this.props.name}!</span></Then>
                <Else>{() =>
                  <span className="not-ok">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 React from 'react';
import { If, Then, Else } from 'react-if';

class Beer extends React.Component {

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

});

Shorthands: When and Unless

import React from 'react';
import { When, Unless } from 'react-if';

const someCondition = false

const Example = () => (
    <div>
        <When condition={ someCondition }>
            This will only be displayed, if the condition is TRUE
        </When>
    </div>
)

const AnotherExample = () => {
    <div>
        <Unless condition={ someCondition }>
            This will only be displayed, if the condition is FALSE
        </Unless>
    </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 = If.Else;

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.

<When /<

A shorthand for <If condition={...}><Then>...</Then></If>

<Unless /<

A shorthand for <If condition={...}><Unless>...</Unless></If>

License

React If is released under the MIT license.