jonatansalas / react-if

🌗 Render React components conditionally

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 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>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 = 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.

License

React If is released under the MIT license.